Entry
How can I swap table columns?
Nov 3rd, 2005 08:38
Martin Honnen,
Within the W3C DOM Level 2 a HTMLTableElement has a property named rows
through which you need to loop and swap the cells in each row.
Here is an example that has been tested to work with Netscape 7, Opera
7 and 8, and IE 6 and should work with Netscape 6, Mozilla, Firefox, IE
5/5.5 and other DOM compliant browsers too:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>swapping table columns</title>
<script type="text/javascript">
function swapColumns (table, colIndex1, colIndex2) {
if (table && table.rows && table.insertBefore && colIndex1 != colIndex2) {
colIndex1 = Number(colIndex1);
colIndex2 = Number(colIndex2);
if (colIndex1 == colIndex2 - 1 || colIndex1 == colIndex2 + 1) {
if (colIndex1 > colIndex2) {
var tempIndex = colIndex1;
colIndex1 = colIndex2;
colIndex2 = tempIndex;
}
for (var i = 0; i < table.rows.length; i++) {
var row = table.rows[i];
row.insertBefore(row.cells[colIndex2], row.cells[colIndex1]);
}
}
else {
for (var i = 0; i < table.rows.length; i++) {
var row = table.rows[i];
var cell1 = row.cells[colIndex1];
var cell2 = row.cells[colIndex2];
var siblingCell1 = row.cells[colIndex1 + 1];
if (typeof siblingCell1 == 'undefined') {
siblingCell1 = null;
}
row.insertBefore(cell1, cell2);
row.insertBefore(cell2, siblingCell1);
}
}
}
}
function elementFromId (elementId) {
if (document.getElementById) {
return document.getElementById(elementId);
}
else {
return null;
}
}
</script>
<script type="text/javascript">
var tableId = 'table1';
var randomRows = Math.floor(Math.random() * 10) + 5;
var randomCols = Math.floor(Math.random() * 10) + 5;
function writeRandomTable (tableId) {
var html = '';
html += '<table id="' + tableId + '" border="1">\r\n';
html += '<tbody>\r\n';
for (var i = 0; i < randomRows; i++) {
html += '<tr>\r\n';
for (var j = 0; j < randomCols; j++) {
html += '<td>cell ' + i + ', ' + j + '<\/td>\r\n';
}
html += '<\/tr>\r\n';
}
html += '<\/tbody>\r\n';
html += '<\/table>\r\n';
document.write(html);
}
function writeGUI () {
var html = '';
html += '<form action="" onsubmit="return false;">\r\n';
html += '<div>\r\n';
html += '<label>column index 1:\r\n';
html += '<select name="colIndex1">\r\n';
for (var i = 0; i < randomCols; i++) {
html += '<option value="' + i + '">' + i + '<\/option>\r\n';
}
html += '<\/select>\r\n';
html += '<\/label>\r\n';
html += '<label>column index 2:\r\n';
html += '<select name="colIndex2">\r\n';
for (var i = 0; i < randomCols; i++) {
html += '<option value="' + i + '">' + i + '<\/option>\r\n';
}
html += '<\/select>\r\n';
html += '<\/label>\r\n';
html += '<input type="button" value="swap columns" ';
html += 'onclick="swapColumns(elementFromId(tableId), ';
html +=
'this.form.colIndex1.value, this.form.colIndex2.value);">\r\n';
html += '<\/div>\r\n';
html += '<\/form>\r\n';
document.write(html);
}
</script>
</head>
<body>
<script type="text/javascript">
writeRandomTable(tableId);
writeGUI();
</script>
</body>
</html>
Note that this simply shows how to do the column swap, no attempt is
made to optimize for speed. Results differ strongly between browsers, on
the same machine Netscape 7.2 took less than 3 seconds to swap two
columns in a table with 800 rows and 100 columns, Opera 7.50 took
slightly more than 3 seconds while MSIE 6 took more than 57 seconds for
the same task.
