html中jquery创建表格,jQuery动态创建表格

html>

动态创建表格案例

* { 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: green;            font: bold 16px "微软雅黑";            color: #fff;

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

}        tbody tr {            background-color: #f0f0f0;

}        tbody tr:hover {            cursor: pointer;            background-color: #fafafa;

}        a{            color: #47C6DB;

}    

var data = [{            type: "水果",            name: "香蕉",            num: "100",            terms:"查看详情",

},{            type: "水果",            name: "苹果",            num: "50",            terms:"查看详情",

},{            type: "水果",            name: "火龙果",            num: "200",            terms:"查看详情",

}];

$(function(){            //清空所有的子节点

$("#table_data").empty();            for( var i = 0; i 

var $trTemp = $("

");                //往行里面追加 td单元格

$trTemp.append("

"+ data[i].type +"");

$trTemp.append("

"+ data[i].name +"");

$trTemp.append("

"+ data[i].num +"");

$trTemp.append("

"+ data[i].terms +"");

$trTemp.appendTo("#table_data");

}

});    

产品类别产品名称数量详情

效果：

jQuery动态创建表格

作者：椰果粒

链接：https://www.jianshu.com/p/199f52d0ef19