这篇博客介绍了如何使用JQuery动态地创建表格。当点击‘获取数据’按钮时，表格将填充从数据数组中获取的条目，包括标题、地址和说明。每个表格行在鼠标悬停时会改变背景色，并且具有可点击的样式。
<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;
}
table tr {
background-color: #f0f0f0;
}
table tr:hover {
background-color: #fafafa;
cursor: pointer;
}
</style>
</head>
<body>
<button>获取数据</button>
<table>
<thead>
<tr>
<th>标题</th>
<th>地址</th>
<th>说明 </th>
</tr>
</thead>
<tbody>
<!-- <td>1</td>
<td>2</td>
<td>3</td> -->
</tbody>
</table>
<script src="./jquery-1.11.1.js"></script>
<script>
var data = [
{
name:"布卡1",
url:"https://www.bukaedu.com/",
type:"it最强培训机构1"
},
{
name:"布卡2",
url:"https://www.bukaedu.com/",
type:"it最强培训机构2"
},
{
name:"布卡3",
url:"https://www.bukaedu.com/",
type:"it最强培训机构3"
},
];
$("button").click(function(){
var str ="";
for ( var i =0;i< data.length;i++){
str +="<tr><td>"+data[i].name+"</td><td>"+data[i].url+"</td><td>"+data[i].type+"</td></tr>"
}
$("tbody").html(str)
})
</script>
扫一扫
633
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
