如何删除表格中的最后一行并将其设置为javascript中的第一行?

时间:2017-07-18 17:46:31

标签: javascript

我尝试使用向下的函数()来删除最后一行并将其作为第一行插入,而display()函数只是创建表。

    <body>
    <script>
        function downward() {
                    var table = document.getElementsByTagName('table');
                    var count = table.rows.length - 1;
                    var table = table[count];
                    var rows = table.getElementsByTagName('tr');
                    var shifted = rows[count];
                    rows[count].parentNode.removeChild(rows[count]);
                    table.insertBefore(rows[0]);

                }
    function display() {
        var table = document.createElement('table');

        table.setAttribute("id", "tbl");

        for (var i = 0; i < 4; i++) {
            var tr = document.createElement('tr');
            for (var j = 0; j < 4; j++) {
                var td = document.createElement('td');
                var text = document.createTextNode(j+i);

                td.appendChild(text);
                tr.appendChild(td);
            }
            table.appendChild(tr);
        }
        document.body.appendChild(table);
    }
    </script>
<input id="display" type="button" value="Display" onclick="display();" />
<input id="downward" type="button" value="downward" onclick="downward();" />
    </body>

1 个答案:

答案 0 :(得分:0)

使用.removeChild删除最后一个孩子,并使用.insertBefore将其插入第一个元素之前。见例:

function myFunction(){
var table = document.getElementById("myTable");
var tr = document.getElementById("myTable").lastChild;
table.removeChild[document.getElementsByTagName("tr").lenght];
table.insertBefore(tr, document.getElementById("myTable").firstChild);
}
<table><tbody id="myTable"><tr><td>1</td></tr><tr><td>2</td></tr><tr><td>3</td></tr></tbody></table>
<br>
<button onclick="myFunction()" value="click me to see the result">click me to see the result</button>