zoukankan      html  css  js  c++  java
  • Javascript插入、删除一个表格行

    <html>
    <head>
    <script type="text/javascript">
    function deleteRow(r)
    {
    var i=r.parentNode.parentNode.rowIndex
    document.getElementById('myTable').deleteRow(i)
    }

    function insertRowInTable(){

    <html>
    <head>
    <script type="text/javascript">
    function deleteRow(r)
    {
    var i=r.parentNode.parentNode.rowIndex
    document.getElementById('myTable').deleteRow(i)
    }

    function insertRowInTable(){
    var table = document.getElementById("myTable");
    var newRow = table.insertRow(-1);
    newRow.insertCell().innerHTML = newRow.rowIndex;
    newRow.insertCell(-1).innerHTML = "<input type='button' value='删除' onclick='deleteRow(this)'>";
    }
    </script>
    </head>
    <body>

    <table id="myTable" border="1">
    <tr>
    <td>Row 1</td>
    <td><input type="button" value="删除" onclick="deleteRow(this)"></td>
    </tr>
    <tr>
    <td>Row 2</td>
    <td><input type="button" value="删除" onclick="deleteRow(this)"></td>
    </tr>
    <tr>
    <td>Row 3</td>
    <td><input type="button" value="删除" onclick="deleteRow(this)"></td>
    </tr>
    </table>
    <input type="button" onclick="insertRowInTable();" value="插入一行" />
    </body>
    </html>


    deleteRow()   从表格删除一行。

    insertRow()   在表格中插入一个新行。

    innerHTML     设置或返回行的开始标签和结束标签之间的 HTML。

    rowIndex      返回该行在表中的位置。

    var table = document.getElementById("myTable");
    var newRow = table.insertRow(-1);
    newRow.insertCell().innerHTML = newRow.rowIndex;
    newRow.insertCell(-1).innerHTML = "<input type='button' value='删除' onclick='deleteRow(this)'>";
    }
    </script>
    </head>
    <body>

    <table id="myTable" border="1">
    <tr>
    <td>Row 1</td>
    <td><input type="button" value="删除" onclick="deleteRow(this)"></td>
    </tr>
    <tr>
    <td>Row 2</td>
    <td><input type="button" value="删除" onclick="deleteRow(this)"></td>
    </tr>
    <tr>
    <td>Row 3</td>
    <td><input type="button" value="删除" onclick="deleteRow(this)"></td>
    </tr>
    </table>
    <input type="button" onclick="insertRowInTable();" value="插入一行" />
    </body>
    </html>

  • 相关阅读:
    字符串Hash 学习笔记
    P4315 月下“毛景树” 题解
    page
    Equation
    Graph
    配置UOJ数据的正确姿势
    luogu2261余数求和题解--整除分块
    luogu2858奶牛零食题解--区间DP
    luogu1005矩阵取数游戏题解--区间DP
    luogu4677山区建小学题解--区间DP
  • 原文地址:https://www.cnblogs.com/0000/p/1549529.html
Copyright © 2011-2022 走看看