[thelist] Workaround for setAttribute bug in IE7?
Ryan Rushton
web at ryanrushton.com
Mon Dec 11 00:15:28 CST 2006
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;
}
More information about the thelist
mailing list