JavaScript error while trying to hide table rows

Question

Hello everyone. I am trying to display rows depending upon users choice. Suppose (s)he wants only 3 rows, then the fourth and fifth row will hide. Please find below the part of html and javascript.

HTML

<table>
  <tr id="sRow1">
    <td>1a</td>
    <td>1b</td>
  </tr>
  <tr id="sRow2">
    <td>2a</td>
    <td>2b</td>
  </tr>
  <tr id="sRow3">
    <td>3a</td>
    <td>3b</td>
  </tr>
  <tr id="sRow4">
    <td>4a</td>
    <td>4b</td>
  </tr>
  <tr id="sRow5">
    <td>5a</td>
    <td>5b</td>
  </tr>
</table>

JavaScript

// b gets value from xml file        
    while (b <= 5)
    {
        var rowName = "sRow" + b;
        alert(rowName);
        try {
            document.getElementById(rowName).style.display = "none";
        }
        catch (err)
        {
            alert(err.description)
        }
        b++;
    }

I am getting Object required error at document.getElementById(rowName).style.display = "none";. Can you please help.

Answer 1

You're missing the interesting bit (where b comes from), so I'm gonna just guess: sometimes b isn't actually a number between 1 and 5 inclusive. Maybe it's a string that doesn't format cleanly to a single-digit numeral 1-5, or maybe it's something else entirely... Let's make your code a bit safer, just in case I'm right:

// b gets value from xml file

// ensure b is a number - will fail comparison if NaN
b = new Number(b);
while (b <= 5)
{
  var rowName = "sRow" + b;
  var row = document.getElementById(rowName);
  if ( row ) // verify element was found before trying to modify it!
    row.style.display = "none";
  b++;
}

Note that I've removed the try {} catch - you're better off just testing the return value of getElementById(), since that won't interfere with debugging should you wish to use a debugger later on...

Answer 2

In my experience, you'll get inconsistent results across different browsers trying to make table rows invisible by modifying style attributes. A safer thing to do is to actually remove and insert the rows from the table using the insertRow() and deleteRow() dom methods on the table object. This is properly supported across all major browsers you're likely to encounter.

Answer 3

I think you are missing the runat attribute with the row id, as you have mentioned the id of the row but didn't mentioned the runat attribute, if you don't mentioned runat attribute then that error comes.