HTML页面创建动态表格JavaScript和jQuery

前言

只用HTML创建静态表格好说，遇到不确定长度表格的时候就不行了，这里分别给出JavaScript和jQuery两种创建动态表格的方法，本质是一样的

方法

JavaScript方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格JavaScript</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <div><button id="confirm">确定</button></div>
    <div>
        <table>
            <thead>
                <th>th1</th>
                <th>th2</th>
                <th>th3</th>
                <th>th4</th>
            </thead>
            <tbody id="tbody"></tbody>
        </table>
    </div>
</body>
<script>
$(document).ready(function () {
    $("#confirm").click(function () {
        $("#tbody").empty();  // 清空子元素
        for(var i=0; i<10; i++) {  // 循环次数根据需求更改
            var tr = document.createElement("tr"),
                td1 = document.createElement("td"),
                td2 = document.createElement("td"),
                td3 = document.createElement("td"),
                td4 = document.createElement("td");
            td1.innerHTML = "数据1";  // 数据根据需求修改
            td2.innerHTML = "数据2";
            td3.innerHTML = "数据3";
            td4.innerHTML = "数据4";

            tr.appendChild(td1);
            tr.appendChild(td2);
            tr.appendChild(td3);
            tr.appendChild(td4);

            var tbody = document.getElementById("tbody");
            tbody.appendChild(tr);  // 插入子元素
        }
    })
})
</script>
</html>

2.jQuery方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格jQuery</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div><button id="confirm">确定</button></div>
<div>
    <table>
        <thead>
            <th>th1</th>
            <th>th2</th>
            <th>th3</th>
            <th>th4</th>
        </thead>
        <tbody id="tbody"></tbody>
    </table>
</div>
</body>
<script>
$(document).ready(function () {
    $("#confirm").click(function () {
        for(var i=0; i<10; i++) {  // 循环次数根据需求更改
            var td1 = $("<td></td>").text("data1"),  // 数据根据需求修改
                td2 = $("<td></td>").text("data2"),
                td3 = $("<td></td>").text("data3"),
                td4 = $("<td></td>").text("data4");
            var tr = $("<tr></tr>").append(td1, td2, td3, td4);
            $("#tbody").append(tr);
        }
    })
});
</script>
</html>

HTML页面创建动态表格JavaScript和jQuery

前言

方法

猜你喜欢