孙肖宁

jQuery动态生成表格
描述:当用户点击添加数据的时候,表格的内容会自动添加,点击之前,只有表头吗,没有内容,内容是从服务器中取到的。所有...
扫描右侧二维码阅读全文
11
2018/05

jQuery动态生成表格

描述:当用户点击添加数据的时候,表格的内容会自动添加,点击之前,只有表头吗,没有内容,内容是从服务器中取到的。所有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>
Last modification:May 11th, 2018 at 10:36 am
If you think my article is useful to you, please feel free to appreciate

Leave a Comment