gpt4 book ai didi

javascript - 导航(突出显示)表中的指定行

转载 作者:行者123 更新时间:2023-11-28 09:25:55 25 4
gpt4 key购买 nike

如何创建特定函数或构建下面的现有代码,以便我可以转到(突出显示)表中的特定行。请注意,表头应始终被排除,因此,从表头后面的“0”开始行计数。

即。 函数 goToRow('3')

这个函数会突出显示第 3 行

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#mstrTable {
border: 1px solid black
}
#mstrTable td, th {
border: 1px solid black
}

#mstrTable tr.normal td {
color: black;
background-color: white;
}
#mstrTable tr.highlighted td {
color: white;
background-color: gray;
}
</style>
</head>
<body>
<table id="mstrTable">
<thead>
<tr>
<th>File Number</th>
<th>Date1</th>
<th>Date2</th>
<th>Status</th>
<th>Num.</th>
</tr>
</thead>
<tbody>
<tr>
<td>KABC</td>
<td>09/12/2002</td>
<td>09/12/2002</td>
<td>Submitted</td>
<td>0</td>

</tr>
<tr>
<td>KCBS</td>
<td>09/11/2002</td>
<td>09/11/2002</td>
<td>Approved</td>
<td>1&nbsp;</td>
</tr>

<tr>
<td>WFLA</td>
<td>09/11/2002</td>
<td>09/11/2002</td>
<td>Submitted</td>
<td>2</td>
</tr>
<tr>
<td>WTSP</td>
<td>09/15/2002</td>
<td>09/15/2002</td>
<td>In-Progress</td>
<td>3</td>
</tr>
</tbody>
</table>

<script type="text/javascript">

var table = document.getElementById("mstrTable");
var thead = table.getElementsByTagName("thead")[0];
var tbody = table.getElementsByTagName("tbody")[0];

tbody.onclick = function (e) {
e = e || window.event;
var td = e.target || e.srcElement; //assumes there are no other elements inside the td
var row = td.parentNode;
alert('Row is ' + (row.rowIndex - 1))
if (this.lst&&this.lst!=row){
this.lst.className='';
}
row.className = row.className==="highlighted" ? "" : "highlighted";
this.lst=row;
}

thead.onclick = function (e) {
e = e || window.event;
var th = e.target || e.srcElement; //assumes there are no other elements in the th
alert(th.innerHTML);
}
</script>
</body>
</html>

最佳答案

Here这是一个关于如何使用 jQuery 实现它的小示例。

关于javascript - 导航(突出显示)表中的指定行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14406777/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com