首頁 > 其他

js動態建立table並調整tr順序

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

<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);' onclick=/"upTR(this);/">上移</a>";

        var downHref = "<a href='javascript:void(0);' onclick=/"downTR(this);/">下移</a>";

        var delHref = "<a href='javascript:void(0);' onclick=/"delTR(this);/">刪除</a>";

        td3.innerHTML = upHref + "&nbsp;&nbsp;" + downHref + "&nbsp;&nbsp;" + 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)

            {

                selectedTr = 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" onclick="addNameTR()"></td>

        <td width="150px"><input type="button" value="Submit" onclick="submitTable();"></td>

    </tr>

</tbody>

</table>

</BODY>

</HTML>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More