案例：jQuery动态创建表格（完整代码）

最新推荐文章于 2024-04-22 15:36:45 发布

神经质土豆

最新推荐文章于 2024-04-22 15:36:45 发布

阅读量1.4k

点赞数

分类专栏： jQuery 文章标签：前端 html javascript jquery css

本文链接：https://blog.csdn.net/m0_65085680/article/details/127268738

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

案例分析

根据添加的对象动态生成表格

代码实现

在这里就不一一分析了，具体分析可见动态生成表格（js）

注意：一定要引入jq链接！

完整代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            border: 1px solid #ccc;
            /* 边框合并 */
            border-collapse: collapse;
        }
        th,td{
            border: 1px solid #ccc;
            color: #000;
            padding: 10px;
        }
        th{
            background-color: skyblue;
            color: #fff;
        }
        td{
            font-size: 14px;
        }
        tbody tr{
            background-color: #f0f0f0;
            cursor: pointer;
        }
        tbody tr:hover{
            background-color: #fafafa;
        }
    </style>
</head>
<body>
    <button>获取数据</button>
    <table>
        <thead>
            <tr>
                <th>标题</th>
                <th>地址</th>
                <th>说明</th>
            </tr>
        </thead>
        <tbody>
            <!-- <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr> -->
        </tbody>
    </table>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
    <script>
        $(function(){
            var date=[{
                name:'神经质土豆1',
                url:"https://blog.csdn.net/m0_65085680?type=blog",
                type:"前端"
            },
            {
                name:'神经质土豆2',
                url:"https://blog.csdn.net/m0_65085680?type=blog",
                type:"前端"
            },
            {
                name:'神经质土豆3',
                url:"https://blog.csdn.net/m0_65085680?type=blog",
                type:"前端"
            }]
          $("button").click(function(){
              var str='';
              for(var i=0;i<date.length;i++){
                // console.log(date[i]);
                str += "<tr><td>"+ date[i].name+ "</td><td>"+date[i].url+"</td><td>"+date[i].type+"</td></tr>";

              }
              $("tbody").html(str)
          })
        })
    </script>
</body>
</html>