JS + HTML 表格动态添加一行

最新推荐文章于 2024-08-08 16:36:35 发布

LaZGodSword

最新推荐文章于 2024-08-08 16:36:35 发布

阅读量8.2k

点赞数 12

文章标签： html javascript

本文链接：https://blog.csdn.net/qq_44490330/article/details/107944801

版权

JS + HTML 表格动态添加一行

一、使用innerHTML对表格进行添加一行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 50px;
        }

        a{
            color: red;
        }
        

    </style>
</head>
<body>
    <div><a>表格动态添加一行</a></div>
    <table id="table1" border="1" >
        <tr>
            <th id="td_id">编号</th>
            <th id="td_name">姓名</th>
            <th id="td_age">年龄</th>
            <th id="td_sex">性别</th>
        </tr>
    </table>

    <div><input type="button" id="btn_add" value="添加"></div>
    <script>
        /**
         * 动态添加的方法有两种
         *  1、document.create();
         *  2、innerHTML();
         *
         */

        document.getElementById("btn_add").οnclick=function () {
            var table =document.getElementById("table1");
            table.innerHTML += "<tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>";

        }

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

使用innerHTML对表格添加一行，如需动态添加数据可添加输入框，将数据动态输入

添加输入框：

<div><input type="text" id="btn_id"><input type="text" id="btn_name"><input type="text" id="btn_age"><input type="text" id="btn_sex"><input type="button" id="btn_add" value="添加"></div>

对输入框数据获取并添加数据到表格中

document.getElementById("btn_add").οnclick=function () {
    var id=document.getElementById("btn_id").value;
    var name=document.getElementById("btn_name").value;
    var age=document.getElementById("btn_age").value;
    var sex=document.getElementById("btn_sex").value;
    var table =document.getElementById("table1");
    table.innerHTML += "<tr><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td></tr>";

}

二、使用create方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <div><a>动态添加表格一行</a></div>
    <div><input type="text" id="btn_id"><input type="text" id="btn_name"><input type="text" id="btn_age"><input type="text" id="btn_sex"><input type="button" id="btn_add" value="添加"></div>
    <table id="table1" border="1" >
        <tr>
            <th id="td_id">编号</th>
            <th id="td_name">姓名</th>
            <th id="td_age">年龄</th>
            <th id="td_sex">性别</th>
        </tr>
    </table>
    
    <script>

        document.getElementById("btn_add").onclick = function () {
            var id=document.getElementById("btn_id").value;
            var name=document.getElementById("btn_name").value;
            var age=document.getElementById("btn_age").value;
            var sex=document.getElementById("btn_sex").value;
            var table =document.getElementById("table1");

            var td_id = document.createElement("td");
            var text_id = document.createTextNode(id);
            td_id.appendChild(text_id);

            var td_name = document.createElement("td");
            var text_name = document.createTextNode(name);
            td_name.appendChild(text_name);

            var td_age = document.createElement("td");
            var text_age = document.createTextNode(age);
            td_age.appendChild(text_age);

            var td_sex = document.createElement("td");
            var text_sex = document.createTextNode(sex);
            td_sex.appendChild(text_sex);

            var tr = document.createElement("tr");
            tr.appendChild(td_id);
            tr.appendChild(td_name);
            tr.appendChild(td_age);
            tr.appendChild(td_sex);

            table.appendChild(tr);


        }

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