Rearranging rows in a table

I have this table:
<TABLE ID="tbl">
	<THEAD>
	<TR>
		<TH>Col 0</TH>
	</TR>
	</THEAD>

	<TBODY>
	<TR>
		<TD>Row 0</TD>
	</TR>
	<TR>
		<TD>Row 1</TD>
	</TR>
	</TBODY>
</TABLE>

I want to switch the order of the rows in the table body and there does not
seem to be a straightforward way to do this. I can write this code:

	var pTable = document.getElementById("tbl");
	var pRow0 = pTable.tBodies[0].rows[0];
	var pRow1 = pTable.tBodies[0].rows[1];

	var pNewRow = pTable.tBodies[0].insertRow(0);
	var pCell, i, j;

	for(i = 0; i < pRow1.cells.length; i++)
	{
		pCell = pNewRow.insertCell(i);
		for(j = 0; j < pRow1.cells[i].childNodes.length; j++)
			pCell.appendChild(pRow1.cells[i].childNodes[j]);
	}

	pTable.tBodies[0].deleteRow(2);


However, if I've set any attributes on the HTMLTableRowElement or on the
HTMLTableCellElement via setAttribute(), they get lost because I can't clone
these elements and insert them into the new table.  Why aren't there
insertRow() and insertCell() methods that allow you to pass the node you
want for the new Row/Cell?  If these methods were in place, this problem
would become:

	var pTable = document.getElementById("tbl");
	var pRow1 = pTable.tBodies[0].rows[1];

	pTable.tBodies[0].insertRow(pRow1, 0);

And of course, all my attributes get moved over because I'm moving a single
node rather than copying everything.
-Jeff

Received on Thursday, 14 October 1999 10:16:27 UTC