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>

  • 相关阅读:
    2015-03-20——移动端UC浏览器、QQ浏览器自动全屏
    2015-03-18——mongodb的简单配置
    2015-03-12——简析DOM2级样式
    2015-03-12——简析DOM2级事件
    2015-03-11——简析DOM规范
    2015-03-10——简析javascript对象
    分页控件的编写
    Jquery添加掩盖层的插件
    正则表达式/g/i/d
    MVC请求生命周期
  • 原文地址:https://www.cnblogs.com/0000/p/1549529.html
Copyright © 2011-2022 走看看