[thelist] Workaround for setAttribute bug in IE7?

[Ryan Rushton]

I have a table that lists items (1 per row).  When the user clicks on an 
item I want to insert a new row directly below the clicked item and pull 
in a summary from a database.  My code works fine in Firefox, but in IE 
the line: newCell.setAttribute("colspan",8); doesn't seem to set the 
colspan.  Any suggestions for a workaround?


the HTML:
<table id="myList" summary="A list of items." class="mgmt">
<caption>Item List</caption>
...
<tr id="record10490">
    <td><input type="checkbox" name="items" class="inputCheck" 
id="10490" value="10490" /></td>
    <td>154</td>
    <td>10490</td>
    <td><a 
href="itemDescription.do?action=getItems&display=details&items=10490" 
onclick="toggleSummary('10490'); return false;">Item One</a></td>
    <td>12/8/06</td>
    <td>Active</td>
    <td>John Doe</td>
    <td><a href="item.do?action=editItem&id=10490">edit</a></td>
</tr>
...

the JavaScript:
// Display/hide the summary for a given item
function toggleSummary(recID) {
   var thisTable = document.getElementById('myList');
   var itemRowId = 'record' + recID;
   var itemRow = document.getElementById(itemRowId);
   var itemRowCells = itemRow.getElementsByTagName("td");
   var itemBgColor = itemRowCells[1].style.backgroundColor;
   var summaryRowId = 'summary' + recID;
   var summaryRow = document.getElementById(summaryRowId);

    // toggle off
    if (summaryRow != null) {
        thisTable.deleteRow(summaryRow.rowIndex);
    }

    // toggle on
    else {
        var newRowIndex = itemRow.rowIndex + 1;
        var newRow = thisTable.insertRow(newRowIndex);
        newRow.setAttribute("id",summaryRowId);
        var newCell = newRow.insertCell(0);
        newCell.setAttribute("colspan",8);
        newCell.style.backgroundColor = itemBgColor;
        newCell.innerHTML = '<iframe 
src="itemDescription.do?action=getItems&display=details&items=' +recID 
+'" frameborder="0" class="itemDescription"></iframe>';
    }
  return false;
}