js删除表格某一行的功能实现

  • 作者:村长
  • 发布时间:2020-05-08 13:37
  • 分类:JavaScript
  • 标签: 热门推荐

简单实现表格的新增和删除操作:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格数据新增</title>
</head>
<body>
    
    <table border="1" id="table">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>班级</th>
            <th>电话</th>
            <th>操作</th>
        </tr>
    </table>
    <br>
    <br>
    <input type="text" name="" placeholder="姓名" id="names">
    <select name="" id="sex">
        <option value="男">男</option>
        <option value="女">女</option>
    </select>
    <input type="text" name="" placeholder="年龄" id="age">
    <input type="text" name="" placeholder="班级" id="grade">
    <input type="text" name="" placeholder="电话" id="phone">
    <br>
    <input type="button" value="添加信息" onclick="addInfo()">

    <script>
        var table = document.getElementById("table");

        function addInfo()
        {
            var tr = document.createElement("tr");
            var names = document.getElementById("names").value;
            var sex = document.getElementById("sex").value;
            var age = document.getElementById("age").value;
            var grade = document.getElementById("grade").value;
            var phone = document.getElementById("phone").value;
            tr.innerHTML = "<td>"+names+"</td><td>"+sex+"</td><td>"+age+"</td><td>"+grade+"</td><td>"+phone+
                "</td><td><a href='#' onclick='del(this)'>删除</a></td>";
            table.appendChild(tr);
        }
        function del(obj)
        {
            //找到对应的父元素进行删除操作
            table.removeChild(obj.parentNode.parentNode);
        }
    </script>

</body>
</html>


  • php程序员面试笔试宝典
琉忆编程库
加载中...
TOP