jquery动态创建表格方法分享

KLQ 2020-08-13 15:18:56 java常见问答 5675

下面要给大家介绍的就是jquery方面的知识,你知道jquery动态创建表格的方法吗?对这个方面不大清楚的小伙伴一定要看一下下面的文章内容哦。

实现方式:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
            <title>02-jQuery-动态创建表格案例</title>
            <script src="jquery-1.11.3.js"></script>
            <style>
        * { padding: 0; margin: 0; }
        table {
            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>
        var data = [{
            name: "传智播客",
            url: "http://www.itcast.cn",
            type: "IT最强培训机构"
        },{
            name: "黑马程序员",
            url: "http://www.itheima.com",
            type: "大学生IT培训机构"
        },{
            name: "传智前端学院",
            url: "http://web.itcast.cn",
            type: "前端的黄埔军校"
        }];

        $(function(){
            //第一种:动态创建表格的方式,使用拼接html的方式 (推荐)
            // var html = "";
            // for( var i = 0; i < data.length; i++ ) {
            //     html += "
                <tr>";
            //     html +=     "
                    <td>" + data[i].name + "</td>"
            //     html +=     "
                    <td>" + data[i].url + "</td>"
            //     html +=     "
                    <td>" + data[i].type + "</td>"
            //     html += "
                </tr>";
            // }
            // $("#J_TbData").html(html);

            //第二种: 动态创建表格的方式,使用动态创建dom对象的方式
            //清空所有的子节点
            $("#J_TbData").empty();

            //自杀
            // $("#J_TbData").remove();

            for( var i = 0; i < data.length; i++ ) {
                //动态创建一个tr行标签,并且转换成jQuery对象
                var $trTemp = $("
                <tr></tr>");

                //往行里面追加 td单元格
                $trTemp.append("
                <td>"+ data[i].name +"</td>");
                $trTemp.append("
                <td>"+ data[i].url +"</td>");
                $trTemp.append("
                <td>"+ data[i].type +"</td>");
                // $("#J_TbData").append($trTemp);
                $trTemp.appendTo("#J_TbData");
            }
        });
    
            </script>
        </head>
        <body>
            <table>
                <thead>
                    <tr>
                        <th>标题</th>
                        <th>地址</th>
                        <th>说明</th>
                    </tr>
                </thead>
                <tbody id="J_TbData"></tbody>
            </table>
            <br>
                <!-- 整个表格:table -->
                <table>
                    <thead>
                        <tr>
                            <!-- tr:table row:表格的行 -->
                            <th>一个格</th>
                            <th>一个格</th>
                            <th>一个格</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <!-- rowspan:跨度两个行 -->
                            <td rowspan="2">一个格</td>
                            <!-- clospan:跨度两个列 -->
                            <td colspan="2">一个格</td>
                            <!-- <td>一个格</td> -->
                        </tr>
                        <tr>
                            <!-- <td>sd</td> -->
                            <td>ss</td>
                            <td>ss</td>
                        </tr>
                    </tbody>
                </table>
            </body>
        </html>

jquery动态创建表格方法

以上内容源于网络仅供参考,更多和jquery相关的内容,请继续通过关注奇Q工具网的常见问题栏目来了解吧。

推荐阅读:

jquery获取浏览器可视区域高度方法详解

jquery中ajax完整例子怎么写?jquery中的ajax有什么用?

jquery dialog弹出框居中怎么设置?具体方法详解