JavaScript: 为表格插入或删除行

最新推荐文章于 2024-08-31 16:32:57 发布

v_gimi

最新推荐文章于 2024-08-31 16:32:57 发布

阅读量108

点赞数

分类专栏： Web 文章标签： JavaScript HTML ViewUI

本文链接：https://blog.csdn.net/v_gimi/article/details/83530411

版权

Web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

首先，要了解一下HTML DOM 中的方法：

deleteRow(index): 从表格删除指定位置的行；

deleteCell(index): 从行中删除指定位置的一格；

insertRow(index): 在表格指定位置插入新行；

insetCell(index): 为行内部指定位置插入一格；

innerHTML: 设置或者返回指定位置的开始标签与结束标签之间的HTML内容；

rowIndex: 返回该行在表中的位置；

parentNode: 返回父节点；

插入行：

function insertRowForTable(tableId)
{
  var tableNode = document.getElementById(tableId);
  var newRow = tableNode.insertRow(-1);
  newRow.insertCell(-1).innerHTML = newRow.rowIndex;
  newRow.insertCell(-1).innerHTML = "<input type = 'button' value = 'delete' onclick = deleteRowFromTable(this) />";
}

删除行：

function deleteRowFromTable(rowNode)
{
  var row = rowNode.parentNode.parentNode;
  var tableId = row.parentNode.parentNode.id;
  var index = row.rowIndex;
  document.getElementById(tableId).deleteRow(index);
}

测试页面：

<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
            function insertRowForTable(tableId)
            {
                var tableNode = document.getElementById(tableId);
                var newRow = tableNode.insertRow(-1);
                newRow.insertCell(-1).innerHTML = newRow.rowIndex;
                newRow.insertCell(-1).innerHTML = "<input type = 'button' value = 'delete' onclick = deleteRowFromTable(this) />";
            }
            function deleteRowFromTable(rowNode)
            {
                var row = rowNode.parentNode.parentNode;
                var tableId = row.parentNode.parentNode.id;
                var index = row.rowIndex;
                document.getElementById(tableId).deleteRow(index);
            }
        </script>
    </head>
    <body>
        <input type ="button" value ="add" οnclick="insertRowForTable('myTable')" />
        <table id="myTable">
        </table>
    </body>
</html>