js 指向表格行变色，离开恢复

最新推荐文章于 2025-07-22 00:16:16 发布

1361976860

最新推荐文章于 2025-07-22 00:16:16 发布

阅读量103

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml

原文链接：http://www.cnblogs.com/dxmfans/p/9434719.html

本文介绍了一种使用JavaScript动态创建HTML表格的方法，并为表格行添加了鼠标悬停高亮显示的功能。该方法首先定义了一个包含国家及其首都的数据列表，然后利用JavaScript创建了一个带有表头的表格结构，并通过遍历数据列表填充了表格内容。此外，还实现了当鼠标悬停在表格行上时背景颜色变化的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script>
var bgColor;
onload = function () {
var list = [
{ id: '1', country: '中国', capital: '北京' },
{ id: '2', country: '美国', capital: '华盛顿' },
{ id: '3', country: '日本', capital: '东京' },
{ id: '4', country: '韩国', capital: '首尔' }
];

var body = document.getElementsByTagName('body')[0];
var table = document.createElement('table');
table.border = '1px solid red';
body.appendChild(table);

var thead = document.createElement('thead');
table.appendChild(thead);

var item0 = list[0];

for (var key in item0) {
var tdh = document.createElement('td');
tdh.innerHTML = key;
thead.appendChild(tdh);

}

for (var i = 0; i < list.length; i++) {
var tr = document.createElement('tr');
tr.onmouseover = function () {
bgColor = this.style.backgroundColor;//存储颜色
this.style.backgroundColor = 'yellow';
};
tr.onmouseleave =function(){
this.style.backgroundColor = bgColor;
};
table.appendChild(tr);
var item = list[i];
for (var key in item) {
var td = document.createElement('td');
td.innerHTML = item[key];
tr.appendChild(td);
}
}
}
</script>
</head>
<body>

</body>
</html>

转载于:https://www.cnblogs.com/dxmfans/p/9434719.html