黑马程序员技术交流社区

标题: 【上海校区】原生js实现表格内容增删改 [打印本页]

作者: 爱编码的J    时间: 2019-1-17 18:02
标题: 【上海校区】原生js实现表格内容增删改
table表格中的常用方法和属性:
deleteRow(行号):删除行
rowIndex:获取当前行数的数值
insertRow(行号):添加一行,行数的值
insertCell(数字):添加的是td单元格,数字代表单元格
parentNode:代表找的是父节点
[HTML] 纯文本查看 复制代码
<!doctype html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>Document</title>
</head>
<body>
        <table width="600" border="1" id="frm">
                <tr>
                        <th>序号</th>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>操作</th>
                </tr>
                <tr>
                        <td>1</td>
                        <td>张三</td>
                        <td>22</td>
                        <td><button>删除</button></td>
                </tr>
                <tr>
                        <td>2</td>
                        <td>李四</td>
                        <td>20</td>
                        <td><button>删除</button></td>
                </tr>
        </table>
        <form action="" name="frm">
                姓名: <input type="text" name="user">
                性别: <input type="text" name="age">
                <input type="submit">
        </form>
        <script>
                var frm=document.getElementById("frm");
                function deltr(obj){
                        frm.deleteRow(obj.parentNode.parentNode.rowIndex);
                }
                function addtr(){
                        var user=document.frm.user.value;
                        var age=document.frm.age.value;
                        var index=frm.rows.length;
                        var newtr=frm.insertRow(index);
                        newtr.insertCell(0).innerHTML=index;
                        newtr.insertCell(1).innerHTML=user;
                        newtr.insertCell(2).innerHTML=age;
                        newtr.insertCell(3).innerHTML='<button>删除</button>';
                        index++;
                        return false;
                }
        </script>
</body>
</html>

效果展示:


作者: 一个人一座城0.0    时间: 2019-1-22 08:35
看一看。




欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2