jQuery动态生成表格

2018 年 05 月 11 日

12378 次浏览

1432字数

描述：当用户点击添加数据的时候，表格的内容会自动添加，点击之前，只有表头吗，没有内容，内容是从服务器中取到的。所有jQuery版本是1.8.
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态创建表格</title>
    <style>
        table {
            width: 500px;
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
        }

        th, td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function () {
            //模拟从后台拿到的数据
            var data = [{
                name:"孙肖宁",
                age:"20",
                hobby:"编程"
            },{
                name:"小宁",
                age:"22",
                hobby:"读书"
            }, {
                name:"小宁博客",
                age:"22",
                hobby:"读书"
            }];
            $("#j_btnGetData").click(function () {
                var ele = $("#j_tbData");
                add(ele,data);
            });
        });
        function add(ele,data) {
            var arr  = [];
            for (var i = 0;i<data.length;i++){
                arr.push("<tr><td>"+data[i].name+"</td><td>"+data[i].age+"</td><td>"+data[i].hobby+"</td></tr>");
            }
            var str = arr.toString();
            ele.html(str);
        }
    </script>
</head>
<body>
<input type="button" value="获取数据" id="j_btnGetData"/>
<table>
    <thead>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>爱好</th>
    </tr>
    </thead>
    <tbody id="j_tbData"></tbody>
</table>
</body>
</body>
</html>