这段js老是没得到我要的效果。。郁闷

Question

<table id="oTable" border="1">
            <thead>
                <tr>
                    <th>
                        第一列
                    </th>
                    <th>
                        第二列
                    </th>
                    <th>
                        第三列
                    </th>
                </tr>
            </thead>
            <tr>
                <td style="background-color: red; color: white">
                    Cell 1, Row 1
                </td>
                <td>
                    Cell 2, Row 1
                </td>
                <td style="background-color: blue; color: white">
                    Cell 3, Row 1
                </td>
            </tr>
            <tr>
                <td style="background-color: red; color: white">
                    Cell 1, Row 2
                </td>
                <td>
                    Cell 2, Row 2
                </td>
                <td style="background-color: blue; color: white">
                    Cell 3, Row 2
                </td>
            </tr>
            <tr>
                <td style="background-color: red; color: white">
                    Cell 1, Row 3
                </td>
                <td>
                    Cell 2, Row 3
                </td>
                <td style="background-color: blue; color: white">
                    Cell 3, Row 3
                </td>
            </tr>
        </table>
<input type="button" value="点击" onclick="swapTableCol()" />
        <script type="text/javascript">
            function sortedTable(tableid) {
                var sorted = '第三列,第一列,第二列';
                var sortedHeader = sorted.split(',');
                var tableHeader = [];
                var table = document.getElementById(tableid);
                if (table.rows.length > 0) {
                    var headers = table.rows[0].getElementsByTagName("th");
                    for (var i = 0; i < headers.length; i++) {
                        tableHeader[i] = headers[i].innerText;
                    }
                    var sortedTmpHeader;
                    var tableTmpHeader;
                    var arr = new Array();                    var length = sortedHeader.length > tableHeader.length ? tableHeader.length : sortedHeader.length;
                    for (var i = 0; i < length; i++) {
                        sortedTmpHeader = sortedHeader[i];
                        for (var j = 0; j < tableHeader.length; j++) {
                            if (trim(sortedTmpHeader) == trim(tableHeader[j])) {
                                arr.push((j + '-' + i));
                                break;
                            }
                        }
                    }                    if (arr.length > 0) {
                        var copyRows = new Object();
                        for (var i = 0; i < table.rows.length; i++) {
                            copyRows[i] = table.rows[i].cloneNode(true);
                       }                         var firstIndex;
                        var secondIndex;
                        var parentNode;
                        var newChild;
                        var oldChild;
                        
                        for (var i = 0; i < arr.length; i++) {
                            firstIndex = parseInt(arr[i].split('-')[0]);
                            secondIndex = parseInt(arr[i].split('-')[1]);
                            for (var j = 0; j < table.rows.length; j++) {
                                parentNode = table.rows[j];
                                newChild = copyRows[j].childNodes[secondIndex].cloneNode(true);
                                oldChild = table.rows[j].cells[firstIndex];
                               // if (parentNode && newChild && oldChild) {
                                    parentNode.insertBefore(newChild, oldChild);
                                    parentNode.removeChild(oldChild);
                               // }
                            }
                        }
                    }
                }
            }            function swapTableCol(objTbl, col1, col2) {
//                objTbl = document.getElementById(objTbl);
//                for (var i = 0; i < objTbl.rows.length; i++) {
//                    swapNode(objTbl.rows[i].cells[col1], objTbl.rows[i].cells[col2]);
                //                }
                sortedTable('oTable');
            }            function trim(str) {
                var str = str + "";
                return str.replace(/^\s+|\s+$/, "");
            }            function swapNode(node1, node2) {
                var parent = node1.parentNode; //父节点
                var t1 = node1.nextSibling; //两节点的相对位置
                var t2 = node2.nextSibling;
                if (t1)
                    parent.insertBefore(node2, t1);
                else
                    parent.appendChild(node2);
                if (t2)
                    parent.insertBefore(node1, t2);
                else
                    parent.appendChild(node1);
            }           
        </script>我想将 table 的列左右移动。。但是不行。
问题出在这一段。我估计是 子节点的问题
for (var j = 0; j < table.rows.length; j++) {
                                parentNode = table.rows[j];
                                newChild = copyRows[j].childNodes[secondIndex].cloneNode(true);
                                oldChild = table.rows[j].cells[firstIndex];
                               // if (parentNode && newChild && oldChild) {
                                    parentNode.insertBefore(newChild, oldChild);
                                    parentNode.removeChild(oldChild);
                               // }
                            }

Answer 1

to (烦人的马甲):
太好啦。。
我传入一个字符串
var headerStr='第3列，第1列，第2列';
然后我那个table根据上面的顺序进行显示列ps：原来table 可能是 第1列   第2列    第3列其实就是对table的列进行按我指定的顺序进行排列。我上面 firstIndex 与 secondIndex 换过来啦。不过，我想看看你的写法。
烦人的马甲

Answer 2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function swapTableCol(ar, tableID) {
/****参数说明：
-****ar         Array    zero-based
-****tableID String    id of  the table
*/
var rows = document.getElementById(tableID).getElementsByTagName('tr');
for( var i = 0; i < rows.length; i ++) {
var tdNodes, clonedTdNodes = [];
rows[i].parentNode.nodeName.toLowerCase() == 'thead' ? tdNodes = rows[i].getElementsByTagName('th') : tdNodes = rows[i].getElementsByTagName('td');
for(var j = 0; j < tdNodes.length; j ++) clonedTdNodes.push(tdNodes[j].cloneNode(true));
for( var k = 0; k < tdNodes.length; k ++) {
rows[i].replaceChild(clonedTdNodes[ar[k]], tdNodes[k]);
}
}
}
</script>
</head><body>
<table id="oTable" border="1">
    <thead>
        <tr>
            <th>
                第一列
            </th>
            <th>
                第二列
            </th>
            <th>
                第三列
            </th>
        </tr>
    </thead>
    <tr>
        <td style="background-color: red; color: white">
            Cell 1, Row 1
        </td>
        <td>
            Cell 2, Row 1
        </td>
        <td style="background-color: blue; color: white">
            Cell 3, Row 1
        </td>
    </tr>
    <tr>
        <td style="background-color: red; color: white">
            Cell 1, Row 2
        </td>
        <td>
            Cell 2, Row 2
        </td>
        <td style="background-color: blue; color: white">
            Cell 3, Row 2
        </td>
    </tr>
    <tr>
        <td style="background-color: red; color: white">
            Cell 1, Row 3
        </td>
        <td>
            Cell 2, Row 3
        </td>
        <td style="background-color: blue; color: white">
            Cell 3, Row 3
        </td>
    </tr>
</table>
<input type="button" value="点击" onclick="swapTableCol([2,0,1], 'oTable')" /></body>
</html>