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>

  • 相关阅读:
    [转] EJB 3和Spring技术体系比较
    JBOSS只能本机localhost和127.0.0.1能访问的解决
    JBOSS EAP 6.0+ Standalone模式安装成Windows服务
    IBM WebSphere MQ 7.5基本用法
    maven学习(上)- 基本入门用法
    mac下环境变量、maven3.1.1 及 jdk1.7.0.45配置
    java:读/写配置文件
    java:使用匿名类直接new接口
    java与c#的反射性能比较
    XmlSpy / XSD 以及 验证
  • 原文地址:https://www.cnblogs.com/0000/p/1549529.html
Copyright © 2011-2022 走看看