热门标签
热门文章
- 1[Python] Pyshark统计pcap的packet协议字段并柱状图可视化_pyshark only_summaries=
- 2php数据类型以及运算符、判断条件
- 3Java中定时器
- 4centos7以上系统修改时区时间问题_failed to set time: automatic time synchronization
- 5Webpack 4.X 从零配置SPA单页应用_webpack 打包spa单页面应用
- 6如何测试ChatGPT：深度理解和应用示例_对定制的chatgpt进行测试
- 7【C语言】指针经典题分析_c语言指针例题及解析
- 8普中51单片机学习（EEPROM）
- 9「隐语小课」联邦学习之基本方法_联邦学习梯度聚合
- 10微信小程序之会议OA系统首页布局搭建与Mock数据交互_oa系统布局
当前位置: article > 正文
javascript (table选中的行以指定颜色高亮显示)_.docx w:tbl javascript
作者：Monodyee | 2024-02-19 11:39:17
赞
踩
.docx w:tbl javascript
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<title>table选中的行以指定颜色高亮显示</title>
<script type="text/javascript">
function IniEvent() {
var tbl = document.getElementById("tblMain");
var trs = tbl.getElementsByTagName("tr");
for (var i = 0; i < trs.length; i++) {
trs[i].onclick = TrOnClick;
}
}
function TrOnClick() {
var tbl = document.getElementById("tblMain");
var trs = tbl.getElementsByTagName("tr");
for (var i = 0; i < trs.length; i++) {
if (trs[i] == this) { //判断是不是当前选择的行
trs[i].style.background = "yellow";
}
else {
trs[i].style.background = "white";
}
}
}
</script>
</head>
<body οnlοad="IniEvent()">
<table id="tblMain" border="1">
<tr>
<td>1</td>
<td>三星</td>
<td>AA</td>
</tr>
<tr>
<td>2</td>
<td>Norkia</td>
<td>BB</td>
</tr>
<tr>
<td>3</td>
<td>苹果</td>
<td>CC</td>
</tr>
<tr>
<td>4</td>
<td>联想</td>
<td>DD</td>
</tr>
</table>
</body>
</html>
<head>
<title>table选中的行以指定颜色高亮显示</title>
<script type="text/javascript">
function IniEvent() {
var tbl = document.getElementById("tblMain");
var trs = tbl.getElementsByTagName("tr");
for (var i = 0; i < trs.length; i++) {
trs[i].onclick = TrOnClick;
}
}
function TrOnClick() {
var tbl = document.getElementById("tblMain");
var trs = tbl.getElementsByTagName("tr");
for (var i = 0; i < trs.length; i++) {
if (trs[i] == this) { //判断是不是当前选择的行
trs[i].style.background = "yellow";
}
else {
trs[i].style.background = "white";
}
}
}
</script>
</head>
<body οnlοad="IniEvent()">
<table id="tblMain" border="1">
<tr>
<td>1</td>
<td>三星</td>
<td>AA</td>
</tr>
<tr>
<td>2</td>
<td>Norkia</td>
<td>BB</td>
</tr>
<tr>
<td>3</td>
<td>苹果</td>
<td>CC</td>
</tr>
<tr>
<td>4</td>
<td>联想</td>
<td>DD</td>
</tr>
</table>
</body>
</html>
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/114492
推荐阅读
相关标签
