zoukankan      html  css  js  c++  java
  • 简单JS实现对表的行的增删

    这段代码非常的简单,仅仅作为自己的一个小小的记录!

    ok,先上一个简单的图例,效果如下(注意:这只是一个简单的例子,不过可以根据这个简单的例子,变化出更为复杂的效果)!

    代码也非常的简单,如下所示(注意:图片的路径是在我的小例子中的,表的样式也有待自己的调整):

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>例子</title>
            <script language="javascript">
                var i = 0, j = 1; //行号与列号
                var oNewRow; //定义插入行对象
                var oNewCell1, oNewCell2,oNewCell3; //定义插入列对象
                //添加下一行
                function addNextRow() {
                    i = document.getElementById("MyTable").rows.length;
                    oNewRow = document.getElementById("MyTable").insertRow(i);
                    oNewRow.id = j;
                    //添加第一列
                    oNewCell1 = document.getElementById("MyTable").rows[i].insertCell(0);
                    oNewCell1.innerHTML = "<input name='id_' type='text' style=' 99%' id='investorName" + j + "'/>";
                    //添加第二列        
                    oNewCell2 = document.getElementById("MyTable").rows[i].insertCell(1);
                    oNewCell2.innerHTML = "<input name='name_' type='text'  style=' 99%' id='investorProportion" + j + "'/>";
                    //添加第三列
                    oNewCell3 = document.getElementById("MyTable").rows[i].insertCell(2);
                    oNewCell3.innerHTML = "<img src='images/button/ico/sc.png' name=del"+ j + " onClick='delCurrentRow(" + j + ");' width='16' height='16' />";
                    j++;
                }
                //删除当前行
                function delCurrentRow(j) {
                    with (document.getElementById("MyTable")) {
                        for ( var i = 0; i < rows.length; i++) {
                            if (rows[i].id == j) {
                                deleteRow(i);
                            }
                        }
                    }
                }
            </script>
        </head>
        <body>
                <table id="MyTable" width="100%" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td width="47%">ID号</td>
                        <td width="47%">姓名</td>
                        <td><img src="images/button/ico/plus.png" name="addRow_" onclick="addNextRow();" width="16" height="16" /></td>
                    </tr>
                    <tr>
                        <td><input name="id_" type="text" style=" 99%" id="id"/></td>
                        <td><input name="name_" type="text" style=" 99%" id="name"/></td>
                        <td>&nbsp;&nbsp;</td>
                    </tr>
                </table>                            
        </body>
    </html>
  • 相关阅读:
    python爬虫之趟雷
    python附录-builtins.py模块str类源码(含str官方文档链接)
    python-基础学习篇(一)
    pycharm和webstorm永久激活方法
    计算机网络基础概述
    计算机基础
    B/S和C/S架构简单理解
    认识HTML中文本、图片、链接标签和路径
    结对开发
    全国疫情可视化地图 (一)
  • 原文地址:https://www.cnblogs.com/godtrue/p/3640831.html
Copyright © 2011-2022 走看看