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>

  • 相关阅读:
    浏览器驱动器下载地址
    7.pytest测试完成后通过allure生成测试报告
    6.pytest参数化操作
    5.pytest中fixture的使用(params参数)
    5.pytest中fixture的使用(scope参数)
    4.pytest中固定装置setup和teardown
    3.pytest函数级测试用例和类级测试用例
    2.pytest用例设计及运行
    1.pytest环境搭建
    Pycharm 常用快捷键
  • 原文地址:https://www.cnblogs.com/0000/p/1549529.html
Copyright © 2011-2022 走看看