<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<input type="button" value="load" id="btnLoad"/>
<input type="button" value="set style" id="btnSetStyle" />
<table id="table1" border="1" height="10">
<tr>
<td><input type="checkbox"/>全选</td>
<td>歌手</td>
<td>歌曲</td>
<td>专辑</td>
</tr>
<tr>
<td><input type="checkbox" />全选</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<script type="text/javascript">
window.onload = function () {
var jsonData = [{ singer: "张杰", song: "他不懂", album: "《他不懂》" },
{ singer: "张杰", song: "剑心", album: "《剑心》" },
{ singer: "张杰", song: "爱不解释", album: "《爱不解释》" },
{ singer: "张杰", song: "自己", album: "《自己》" }];
var tableObj=document.getElementById('table1');
document.getElementById('btnLoad').onclick = function () {
for (var i = jsonData.length-1; i >=0; i--) {
var rowObj = tableObj.insertRow(1);
var cellObj1 = rowObj.insertCell(-1);
var num = i+1 < 9 ? '0' + (i+1) : i+1;
cellObj1.innerHTML = '<input type="checkbox"/>' + num;
for (var key in jsonData[i]) {
var cellObj = rowObj.insertCell(-1);
cellObj.innerHTML = jsonData[i][key];
}
}
tableObj.border = '1px';
};
document.getElementById('btnSetStyle').onclick = function () {
var rows = document.getElementById('table1').rows;
for (var i = 0; i < rows.length; i++) {
rows[i].onmouseover = function () {
this.style.backgroundColor = 'yellow';
};
rows[i].onmouseleave = function () {
this.style.backgroundColor = '';
};
}
};
};
</script>
</body>
</html>
JSDom测试
最新推荐文章于 2024-05-08 16:19:44 发布