Webmaster Forum / HTML, CSS, Scripts / JavaScript / July 2008

Hello,
I am learning JavaScript. I have a table on HTML page:

                <table id="announcement_fields" border="0">
                <tbody>
                <tr>
                <td><span class="obligatory">Offer type</span>:</td>
                <td>
                        <select name="offer_type"
onchange="ShowAnnouncementRows();">
                                <option value="" selected>(select)</option>
                                <option value="B">buy</option>
                                <option value="H">hire</option>
                                <option value="S">sell</option>
                                <option value="E">exchange</option>
                        </select>
                </td>
                </tr>
                ...
                <tr>
                <td><label for="caution">Caution:</label></td>
                <td><input type="checkbox" name="caution"></td>
                </tr>
                ...
                </tbody>
                </table>

I want table rows (with input controls) to be visible depending on the
selection of offer_type. For example, I want input caution to be visible
for offer_type = "H" or "(select)".
As you see I am calling function ShowAnnouncementRows() at every change of
offer_type. Here is the code:

function ShowAnnouncementRows()
{
 var visibility = new Array(     // can be more complicated
        new Array(1, 1, 1, 1, 1, 1, 1, 1),
        new Array(1, 1, 1, 1, 1, 0, 1, 1),
        new Array(1, 1, 1, 1, 1, 1, 1, 1),
        new Array(1, 1, 1, 1, 1, 0, 1, 1),
        new Array(1, 1, 1, 1, 1, 0, 1, 1)
  );
  var table = document.getElementById("announcement_fields");
  var tbody = table.tBodies[0];
  if (announcementRows == null)
  {
   announcementRows = new Array();
    for (var r = 0; r < tbody.rows.length; r++) // remember table
      announcementRows.push(tbody.rows[r].innerHTML);
  }   
  for (var r = 1, len = tbody.rows.length; r < len; r++) // leave only first
row
 {
    tbody.removeChild(tbody.lastChild);
    var selIdx =
document.forms["announcement"].elements["offer_type"].selectedIndex;
    if (selIdx > -1)
      for (var r = 1; r < announcementRows.length; r++)
        if (visibility[selIdx][r] == 1) // show visible rows
        {
          var theRow = table.createElement("tr"); // HERE PROBLEM!!!
          theRow.innerHTML = announcementRows[r];
          tbody.appendChild(theRow);
        }
}

I have problems with debugging JavaScript but using alerts I found that the
code executes to the line:
        var theRow = table.createElement("tr");
and it doesn't continue. I don't know why and how to solve the problem. I
also tried document.createElement but it is not a solution.
Please help. Thanks in advance.
/RAM/