简单JS实现对表的行的增删

浏览数：17 / 时间：2015年06月09日

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

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=‘width: 99%‘ id=‘investorName" + j + "‘/>";
                //添加第二列        
                oNewCell2 = document.getElementById("MyTable").rows[i].insertCell(1);
                oNewCell2.innerHTML = "<input name=‘name_‘ type=‘text‘  style=‘width: 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="width: 99%" id="id"/></td>
                    <td><input name="name_" type="text" style="width: 99%" id="name"/></td>
                    <td>&nbsp;&nbsp;</td>
                </tr>
            </table>                            
    </body>
</html>