以下是一个示例代码,演示了如何在表格列中使用单选按钮来实现高亮显示:
HTML:
姓名
Email
选择
张三
zhangsan@example.com
李四
lisi@example.com
王五
wangwu@example.com
JavaScript:
function highlightRow(radio) {
// 获取被点击单选按钮所在的行
var row = radio.parentNode.parentNode;
// 获取表格中的所有行
var rows = document.getElementsByTagName("tr");
// 移除其他行的高亮样式
for (var i = 0; i < rows.length; i++) {
rows[i].classList.remove("highlight");
}
// 添加被点击行的高亮样式
row.classList.add("highlight");
}
CSS:
.highlight {
background-color: yellow;
}
在上述代码中,我们首先在表格中的每一行中添加了一个单选按钮,并为所有的单选按钮设置了相同的name
属性,这样它们就可以作为一组进行选择。
接着,在每个单选按钮的onclick
事件中调用了highlightRow
函数,该函数会将被点击单选按钮所在的行高亮显示。
在highlightRow
函数中,我们首先获取被点击单选按钮所在的行,然后获取表格中的所有行。
接着,我们遍历所有的行,并使用classList
对象的remove
方法来移除其他行的高亮样式。
最后,我们使用classList
对象的add
方法来为被点击的行添加高亮样式。
通过以上代码,当用户点击单选按钮时,相应的行将会高亮显示。
上一篇:表格列定义