如何修改下面的代码，以便在用户点击列标题框时返回列标题的名称。 IE。如果我单击“文件号”框，javascript 警告框将提醒我列标题 (th) 的名称是什么“文件号”等。
<!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 </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">
(
function( )
{
var trows = document.getElementById("mstrTable").rows;
for ( var t = 1; t < trows.length; ++t )
{
trow = trows[t];
trow.className = "normal";
trow.onclick = highlightRow;
}
function highlightRow(e)
{
alert('Row is ' + (this.rowIndex-1))
for ( var t = 1; t < trows.length; ++t )
{
trow = trows[t];
trow.className = ( trow == this && trow.className != "highlighted") ? "highlighted" : "normal";
}
}
}
)();
</script>
</body>
</html>
最佳答案
所有的循环是怎么回事!不需要循环，使用你的事件对象来告诉你点击了什么!
//assumes one thead and one tbody
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;
row.className = row.className==="highlighted" ? "" : "highlighted";
}
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);
}
上面可能是整个表格的一次点击事件，我不想检查被点击的元素类型。
关于javascript - 单击时提醒表头名称，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14324029/