js实现表(table)的增、删功能

最新推荐文章于 2021-09-19 14:20:00 发布

嘘 -你听

最新推荐文章于 2021-09-19 14:20:00 发布

阅读量181

点赞数

分类专栏： js html java 文章标签： java js html

本文链接：https://blog.csdn.net/weixin_44657829/article/details/106043423

版权

java 同时被 3 个专栏收录

38 篇文章 0 订阅

订阅专栏

html

11 篇文章 0 订阅

订阅专栏

6 篇文章 0 订阅

订阅专栏

js实现表(table)的增、删功能;

jQuery实现：https://blog.csdn.net/weixin_44657829/article/details/106043534

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table {
            text-align: center;
        }
    </style>
</head>
<body>
    用户名: <input type="text" id="username">
    年  龄: <input type="text" id="age">
    性  别: <input type="text" id="gender">
    <!-- 给按钮添加事件，在js中定义的方法 -->
    <button onclick="addData()">提交</button>
    <hr>
    <table id="dataContent" border="1" cellspacing="0" cellpadding="0" width="60%">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
    </table>
</body>
<script>
    var username = document.getElementById("username");
    var age = document.getElementById("age");
    var gender = document.getElementById("gender");
    var dataContent = document.getElementById("dataContent");

    function addData() {
        // 取值
        var usernameValue = username.value;
        var ageValue = age.value;
        var genderValue = gender.value;

        // 在表格中插入行，返回新插入的行
        var row = dataContent.insertRow();

        // 在行中插入列, 返回列
        var nameCell = row.insertCell();
        // 给格子中设置值
        nameCell.innerText = usernameValue;

        // 在插入一列
        var ageCell = row.insertCell();
        ageCell.innerText = ageValue;

        var genderCell = row.insertCell();
        genderCell.innerText = genderValue;

        var proceeCell = row.insertCell();
        // 如果格子中是html的内容的话，那么就得用 innerHTML, deleteRow(this)
        // this表示，点击哪个按钮，this就执行按钮
        proceeCell.innerHTML = '<button onclick="deleteRow(this)">删除</button>';
    }

    function deleteRow(btnTag) {
        // btnTag.parentNode 指的是 td,
        // btnTag.parentNode.parentNode 指的是 tr
        var trNode = btnTag.parentNode.parentNode;

        // 获取当前行所处表格中索引的位置
        var rowIndex = trNode.rowIndex;
        // 删除指定索引的行
        dataContent.deleteRow(rowIndex);
    }

</script>
</html>