b站 4天从零玩转jQuery【黑马程序员】部分案例代码_表格生成案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        thead{
            display: table-header-group;
            vertical-align: middle;
            border-color: inherit;
        }
        tbody{
            display: table-header-group;
            vertical-align: middle;
            border-color: inherit;
        }
        table{
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 800px;
            height:50px;
        }
        tbody tr{
            background-color: #f0f0f0;
        }
        tr{
            display: table-row;
            vertical-align: inherit;
            border-color: inherit;
            height:50px;
            text-align: center;
        }
        th{
           background-color: #09c;
            font:bold 16px "微软雅黑";
            color: #fff;
            width: 800px;
            height:50px;
        }
        th td{
            border:1px solid #d0d0d0;
            color:#404060;
            padding:10px;
        }

        table tr, table th, table td { border:1px solid #ddd;  }

    </style>
    <script src="jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //模拟从后端拿到的数据
            //date数组的每一个元素其实就是一个tr
            var data=[{name:"传智播客",url:"http://www.itcast.cn",type:"IT最强培训机构"},
                      {name:"黑马程序员",url:"http://www.itcast.cn",type:"大学生IT培训机构"},
                      {name:"传智前端学院",url:"http://www.itcast.cn",type:"前端的黄埔军校"}];
            $("#j_btnGetDate").click(function () {
                //1.html()
                /*var list=[];
                for(var i=0;i");
                    //生成tr
                    for(var key in data[i]){
                        list.push("");
                        list.push("data[i][key]");
                        list.push("");
                    }
                    list.push("");
                }
                $("#j_tbDate").html(list.join(""));*/


                //2.$()
                for(var i=0;i<data.length;i++){
                    var $tr=$(""+data[i]["name"]+""+data[i]["url"]+">"+data[i]["type"]+"");
                    //把创建的$tr追加到tbody中去
                    $("#j_tbDate").append($tr);
                }

            })
        });

    </script>
</head>
<body>
<input type="button" value="获取数据" id="j_btnGetDate">
<table>
    <thead>
    <tr>
        <th>标题</th>
        <th>地址</th>
        <th>说明</th>
    </tr>
    </thead>
    <tbody id="j_tbDate">

    </tbody>
</table>
</body>
</html>

b站 4天从零玩转jQuery【黑马程序员】部分案例代码_表格生成案例_第1张图片有关这一部分的笔记

jQuery添加节点的几种方式
1.父元素.append("子元素")      作为最后一个子元素添加
2.父元素.prapend("子元素")       作为第一个子元素添加
3.元素A.before(元素B)         把元素B插入到元素A的前面
4.元素A.after(元素B)           把元素B插入到元素A的后面
5.子元素.appendTo(父元素)      把子元素作为父元素的最后一个元素添加


清空结点empty
1.$("#ul").html("");    设置html为空,不推荐,有可能会在造成内存泄漏,不安全
2.$("#ul").empty();     清空元素,推荐使用

移出节点remove
1.$("#li").remove();    移出元素,“自杀”


克隆节点 clone()

获取或设置表单的值
$("#txt").val();       val不给参数就是获取
$("#txt").val("我是设置的值");       val给参数就是设值

啊,写完了,歇一会,明天再写吧。还是一样,其他的代码如果需要,我也可以发给你哦。

你可能感兴趣的:(b站 4天从零玩转jQuery【黑马程序员】部分案例代码_表格生成案例)