API
@-Formulas
JavaScript
LotusScript
Reg Exp
Web Design
Notes Client
XPages
 
Fill In Blank Table Cells
Ever have a web page that has a table in it, and some of the cells of the table are blank? When you look at the table with a browser, those blank cells don't show any borders. If you're not showing table borders, that's fine. But if you do want to show the borders (using CSS or standard HTML), then the page looks ugly. This JavaScript for IE can be used to force a blank space into those cells, which makes the borders appear. The code will not cause any errors in other browsers.

Now, you may be thinking that you can just put " " into every cell to force something to show, or a transparent 1x1 gif in each of the cells. That will force data to be there and force the table borders to show. Assuming you have the time to put that in every single cell, that will work. However, if you're showing a Domino view on the web, you may not be able to do that. If the view is being used by both the Notes client and a web browser, you don't want to put " " in the column because that literal text will show on the Notes client. And you can't put an image into the same column as regular data. So this solution is what you need.

What you want to do is call a function ("fillInEmpties") after the page loads (the "onload" event for the form or $$ViewTemplate or whatever). This function first makes sure that the browser can handle changing inner text on the fly. Assuming it can, then all "TD" tags are processed. If the table cell has no data, then the single space in put into the table cell.

function fillInEmpties() {
   if (document.getElementsByTagName) {
      var tableCells = document.getElementsByTagName("TD");
      var usesInnerText = false;
      for (var i=0; i<tableCells.length; i++) {
         if (tableCells[i].innerText) { usesInnerText = true; i = tableCells.length+1; }
      }
      if (usesInnerText) {
         for (var i=0; i<tableCells.length; i++) {
            if (!tableCells[i].innerText) {
               if (tableCells[i].innerHTML == "") { tableCells[i].innerHTML = "&nbsp;"; }
            } else if (tableCells[i].innerText == "") {
               tableCells[i].innerText = "&nbsp;";
            }
         }
      }
   }
}


The variable usesInnerText is set to true if the browser supports the functionality. If any of the "TD" tags allows access to the property, then it can be changed and exit the first "for" loop quickly. If the innerText functionality is supported, then go through all the "TD" tags. If there is no innerText defined for a cell, then change the innerHTML (note that you couldn't change innerText because it doesn't exist) to be a single space. If the innerText does exist and is blank, change it to be a single space.

Running this function when the page has finished loading will make your tables have continuous borders in IE and other browsers that support the functionality. For browsers that don't support the functionality, you're not losing anything and the code won't error out.