[转]通过js动态创建table并调整tr顺序-优快云博客

本文介绍了一个使用HTML和JavaScript实现的简单表格操作示例，包括添加、提交、上下移动及删除行的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<HTML>
    <HEAD>
        <TITLE>TestTable</TITLE>
        <script>
            function submitTable()
            {
                var trArray = document.getElementsByName("nameTr");
                if (trArray)
                {
                    for (var i = 0; i < trArray.length; i++)
                    {
                        var tr = trArray[i];
                        var tdArray = tr.getElementsByTagName("td");
                        var index = tdArray[0].innerHTML;
                        var name = tdArray[1].innerHTML;
                        alert(index + ": " + name);
                    }
                }
            }

            function addNameTR()
            {
                var userName = document.getElementById("nameText").value;
                var table    = document.getElementById("tableBody");

                var tr = document.createElement('tr');
                tr.id = "nameTr";
                table.appendChild(tr);

                var td1 = document.createElement('td');
                tr.appendChild(td1);
                td1.appendChild(document.createTextNode(getNameTrIndex()));

                var td2 = document.createElement('td');
                tr.appendChild(td2);
                td2.appendChild(document.createTextNode(userName));

                var td3 = document.createElement('td');
                tr.appendChild(td3);
                var upHref = "<a href='javascript:void(0);' οnclick=\"upTR(this);\">上移</a>";
                var downHref = "<a href='javascript:void(0);' οnclick=\"downTR(this);\">下移</a>";
                var delHref = "<a href='javascript:void(0);' οnclick=\"delTR(this);\">删除</a>";
                td3.innerHTML = upHref + " " + downHref + " " + delHref;
            }

            function getNameTrIndex()
            {
                var table = document.getElementById("tableBody");
                var trArray = document.getElementsByName("nameTr");
                if (trArray) {
                    return trArray.length;
                }
                else {
                    return 1;
                }
            }

            function upTR(link)
            {
                var table      = document.getElementById("tableBody");
                var selectedTr = link.parentElement.parentElement;
                var preTr      = selectedTr.previousSibling;
                if (preTr && preTr.id != "topTr")
                {
                    var selectedIndex = selectedTr.getElementsByTagName("td")[0].innerHTML;
                    selectedTr.getElementsByTagName("td")[0].innerHTML = preTr.getElementsByTagName("td")[0].innerHTML;
                    preTr.getElementsByTagName("td")[0].innerHTML = selectedIndex;
                    table.insertBefore(selectedTr, preTr);
                }
            }

            function downTR(link)
            {
                var table      = document.getElementById("tableBody");
                var selectedTr = link.parentElement.parentElement;
                var nextTr     = selectedTr.nextSibling;
                if (nextTr)
                {
                    var selectedIndex = selectedTr.getElementsByTagName("td")[0].innerHTML;
                    selectedTr.getElementsByTagName("td")[0].innerHTML = nextTr.getElementsByTagName("td")[0].innerHTML;
                    nextTr.getElementsByTagName("td")[0].innerHTML = selectedIndex;
                    table.insertBefore(nextTr, selectedTr);
                }
            }

            function delTR(link)
            {
                if (window.confirm("确认删除？"))
                {
                    var table = document.getElementById("tableBody");
                    var selectedTr = link.parentElement.parentElement;
                    while(selectedTr.nextSibling)
                    {
                        selectedTrselectedTr = selectedTr.nextSibling;
                        selectedTr.getElementsByTagName("td")[0].innerHTML -= 1;
                    }
                    table.removeChild(link.parentElement.parentElement);
                }
            }
        </script>
    </HEAD>

    <BODY>
        <table border="1" bordercolor='#000000' align="center" style="border-collapse:collapse;width:500px">
            <tbody id="tableBody">
                <tr id="topTr">
                    <td width="200px">
                        <input type="text" name="nameText">
                    </td>
                    <td width="150px"><input type="button" value="Add" οnclick="addNameTR()"></td>
                    <td width="150px"><input type="button" value="Submit" οnclick="submitTable();"></td>
                </tr>
            </tbody>
        </table>
    </BODY>
</HTML>