<style>
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 src="jquery-1.11.1.js"></script>
<script>
$(function () {
// 模拟从后台拿到的数据
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: "前端的黄埔军校"
}];
//需求:点击按钮，然后生成tr里面生成三个td.数组元素个数个tr。然后放入tbody中
//步骤：
//1.绑定事件
//2.利用for循环,把数组中的所有数据组合成一个字符串。
//3.把生成的字符串设置为html内容添加进tbody中。
//1.绑定事件
$("input").click(function () {
//写入到click事件中，每次点击以后把str清空
var str = "";
//2.利用for循环,把数组中的所有数据组合成一个字符串。
for(var i=0;i<data.length;i++){
//如何生成3组？？？
// str += "<tr><td>1</td><td>2</td><td>3</td></tr>";
//data[i] = 数组中的每一个json
//data[i].name = 数组中的每一个json的name属性值
str += "<tr><td>"+data[i].name+"</td><td>"+data[i].url+"</td><td>"+data[i].type+"</td></tr>";
}
//3.把生成的字符串设置为html内容添加进tbody中。
$("#j_tbData").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">
<!--<tr>-->
<!--<td>1</td>-->
<!--<td>2</td>-->
<!--<td>3</td>-->
<!--</tr>-->
</tbody>
</table>
</body>
动态创建表格（html）
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 制作这样的下拉菜单，是很平常的操作。不少人都会，但是如果有新的武器‘偃月刀’输入到单元格A8，下拉菜单就不会自动更...
- After the spring festival, I came back to work. At the...
