11.14课后作业-完成table.html中删除行、添加行的功能。

最新推荐文章于 2023-12-21 12:43:31 发布

再让我多睡几分钟

最新推荐文章于 2023-12-21 12:43:31 发布

阅读量319

点赞数

分类专栏：作业

本文链接：https://blog.csdn.net/Zaiaj/article/details/78534280

版权

作业专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
姓名：<input type="text" id="name" />
联系方式：<input type="text" id="email" />
年龄：<input type="text" id="age" />
<input type="button" value="添加用户" onclick="addUser()"/>
<br /><br /><hr /><br />
<table id="userTable" align="center" border=1 cellspacing=0 cellpadding=5 width="50%">
   <tr>
        <th>姓名</th>
        <th>联系方式</th>
        <th>年龄</th>
        <th>操作</th>

   </tr>
   <tr>
        <td>测试</td>
        <td>sn@dwd</td>
        <td>18</td>
        <td>
            <input type="button" value="删除" onClick="removeUser(this)" />
        </td>


   </tr>
</table>


    <script type="text/javascript">
        function addUser(){
            var name = document.getElementById('name').value;
            var email = document.getElementById('email').value;
            var age = document.getElementById('age').value;
            var html1 = "<tr><td>"+name+"</td><td>"+email+"</td><td>"+age+"</td><td><input type='button' value='删除' onclick='removeUser(this)' /></td></tr></table>";
            var newhtml = document.getElementById('userTable').innerHTML+html1;
            document.getElementById('userTable').innerHTML = newhtml;


        }

        function removeUser(obj){
            var removeLine = obj.parentNode.parentNode;
            removeLine.parentNode.removeChild(removeLine);

        }


    </script>   
</body>
</html>

再让我多睡几分钟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
11.14课后作业-完成table.html中删除行、添加行的功能。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body>姓名：<input type="text" id="name" />联系方式：<input type="text" id="email" />年龄：<input type="te
复制链接

扫一扫