我想在我的html页面添加功能，以便在选中时突出显示（将行颜色更改为#DFDFDF）。
如果选择了另一行，则将行颜色返回到其初始颜色并为新选择的行着色。
请注意，当点击顶部标题时，id就像要免除颜色的变化。
这是小提琴：http://jsfiddle.net/q42L2/
非常感谢和感谢您的所有帮助
<div id="results" class="scrollingdatagrid">
<table id="mstrTable" cellspacing="0">
<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>Lockdown</td>
<td>2</td>
</tr>
<tr>
<td>WFLA</td>
<td>09/11/2002</td>
<td>09/11/2002</td>
<td>Submitted</td>
<td>1</td>
</tr>
<tr>
<td>WTSP</td>
<td>09/15/2002</td>
<td>09/15/2002</td>
<td>In-Progress</td>
<td>10</td>
</tr>
<tr>
<td>WROC</td>
<td>10/11/2002</td>
<td>10/11/2002</td>
<td>Submitted</td>
<td>12</td>
</tr>
<tr>
<td>WPPP</td>
<td>09/16/2002</td>
<td>09/16/2002</td>
<td>In-Progress</td>
<td>0</td>
</tr>
<tr>
<td>WRRR</td>
<td>09/06/2002</td>
<td>09/06/2002</td>
<td>Submitted</td>
<td>5</td>
</tr>
<tr>
<td>WTTT</td>
<td>09/21/2002</td>
<td>09/21/2002</td>
<td>In-Progress</td>
<td>0</td>
</tr>
<tr>
<td>W000</td>
<td>11/11/2002</td>
<td>11/11/2002</td>
<td>Submitted</td>
<td>7</td>
</tr>
<tr>
<td>KABC</td>
<td>10/01/2002</td>
<td>10/01/2002</td>
<td>Submitted</td>
<td>10</td>
</tr>
<tr>
<td>KCBS</td>
<td>10/18/2002</td>
<td>10/18/2002</td>
<td>Lockdown</td>
<td>2</td>
</tr>
<tr>
<td>WFLA</td>
<td>10/18/2002</td>
<td>10/18/2002</td>
<td>Submitted</td>
<td>1</td>
</tr>
<tr>
<td>WTSP</td>
<td>10/19/2002</td>
<td>10/19/2002</td>
<td>In-Progress</td>
<td>0</td>
</tr>
<tr>
<td>WROC</td>
<td>07/18/2002</td>
<td>07/18/2002</td>
<td>Submitted</td>
<td>2</td>
</tr>
<tr>
<td>WPPP</td>
<td>10/28/2002</td>
<td>10/28/2002</td>
<td>In-Progress</td>
<td>10</td>
</tr>
<tr>
<td>WRRR</td>
<td>10/28/2002</td>
<td>10/28/2002</td>
<td>Submitted</td>
<td>5</td>
</tr>
<tr>
<td>WTTT</td>
<td>10/08/2002</td>
<td>10/08/2002</td>
<td>In-Progress</td>
<td>0</td>
</tr>
<tr>
<td>WIL0</td>
<td>10/18/2001</td>
<td>10/18/2001</td>
<td>Submitted</td>
<td>7</td>
</tr>
<tr>
<td>KABC</td>
<td>04/18/2002</td>
<td>04/18/2002</td>
<td>Submitted</td>
<td>0</td>
</tr>
<tr>
<td>KCBS</td>
<td>10/05/2001</td>
<td>10/05/2001</td>
<td>Lockdown</td>
<td>2</td>
</tr>
<tr>
<td>WFLA</td>
<td>10/18/2002</td>
<td>10/18/2002</td>
<td>Submitted</td>
<td>1</td>
</tr>
<tr>
<td>WTSP</td>
<td>10/19/2002</td>
<td>10/19/2002</td>
<td>In-Progress</td>
<td>0</td>
</tr>
<tr>
<td>WROC</td>
<td>12/18/2002</td>
<td>12/18/2002</td>
<td>Submitted</td>
<td>2</td>
</tr>
<tr>
<td>WPPP</td>
<td>12/28/2002</td>
<td>12/28/2002</td>
<td>In-Progress</td>
<td>8</td>
</tr>
<tr>
<td>WRRR</td>
<td>12/20/2002</td>
<td>12/20/2002</td>
<td>Submitted</td>
<td>5</td>
</tr>
<tr>
<td>WTTT</td>
<td>12/11/2002</td>
<td>12/11/2002</td>
<td>In-Progress</td>
<td>0</td>
</tr>
<tr>
<td>W0VB</td>
<td>01/18/2003</td>
<td>01/18/2003</td>
<td>Submitted</td>
<td>17</td>
</tr>
<tr>
<td>KABC</td>
<td>12/17/2002</td>
<td>12/17/2002</td>
<td>Submitted</td>
<td>20</td>
</tr>
<tr>
<td>KCBS</td>
<td>12/16/2002</td>
<td>12/16/2002</td>
<td>Lockdown</td>
<td>2</td>
</tr>
<tr>
<td>WFAA</td>
<td>12/18/2002</td>
<td>12/18/2002</td>
<td>Submitted</td>
<td>1</td>
</tr>
<tr>
<td>WTSP</td>
<td>12/18/2002</td>
<td>12/18/2002</td>
<td>In-Progress</td>
<td>0</td>
</tr>
<tr>
<td>WROC</td>
<td>12/19/2002</td>
<td>12/19/2002</td>
<td>Submitted</td>
<td>2</td>
</tr>
<tr>
<td>WPPP</td>
<td>12/06/2002</td>
<td>12/06/2002</td>
<td>In-Progress</td>
<td>0</td>
</tr>
<tr>
<td>WRRR</td>
<td>12/28/2002</td>
<td>12/28/2002</td>
<td>Submitted</td>
<td>5</td>
</tr>
<tr>
<td>WTTT</td>
<td>12/30/2002</td>
<td>12/30/2002</td>
<td>In-Progress</td>
<td>0</td>
</tr>
<tr>
<td>UMBA</td>
<td>12/26/2002</td>
<td>12/26/2002</td>
<td>Submitted</td>
<td>7</td>
</tr>
<tr>
<td>KABC</td>
<td>12/18/2002</td>
<td>12/18/2002</td>
<td>Submitted</td>
<td>0</td>
</tr>
<tr>
<td>KCBS</td>
<td>12/29/2002</td>
<td>12/29/2002</td>
<td>Lockdown</td>
<td>2</td>
</tr>
<tr>
<td>WFFF</td>
<td>12/22/2002</td>
<td>12/22/2002</td>
<td>Submitted</td>
<td>1</td>
</tr>
<tr>
<td>WTSP</td>
<td>12/18/2001</td>
<td>12/18/2001</td>
<td>In-Progress</td>
<td>9</td>
</tr>
<tr>
<td>WROC</td>
<td>11/19/2001</td>
<td>11/19/2001</td>
<td>Submitted</td>
<td>2</td>
</tr>
<tr>
<td>WPPP</td>
<td>11/20/2001</td>
<td>11/20/2001</td>
<td>In-Progress</td>
<td>0</td>
</tr>
<tr>
<td>WRRR</td>
<td>10/19/2001</td>
<td>10/19/2001</td>
<td>Submitted</td>
<td>5</td>
</tr>
<tr>
<td>WTTT</td>
<td>11/29/2001</td>
<td>11/29/2001</td>
<td>In-Progress</td>
<td>8</td>
</tr>
<tr>
<td>KPLT</td>
<td>11/19/2001</td>
<td>11/19/2001</td>
<td>Submitted</td>
<td>7</td>
</tr>
<tr>
<td>KABC</td>
<td>11/19/2001</td>
<td>11/19/2001</td>
<td>Submitted</td>
<td>13</td>
</tr>
<tr>
<td>KBRE</td>
<td>11/19/2001</td>
<td>11/19/2001</td>
<td>Lockdown</td>
<td>2</td>
</tr>
<tr>
<td>WFLA</td>
<td>11/19/2001</td>
<td>11/19/2001</td>
<td>Submitted</td>
<td>1</td>
</tr>
<tr>
<td>WTSP</td>
<td>02/19/2003</td>
<td>02/19/2003</td>
<td>In-Progress</td>
<td>0</td>
</tr>
<tr>
<td>WROC</td>
<td>02/17/2003</td>
<td>02/17/2003</td>
<td>Submitted</td>
<td>2</td>
</tr>
<tr>
<td>WPPP</td>
<td>02/16/2003</td>
<td>02/16/2003</td>
<td>In-Progress</td>
<td>16</td>
</tr>
<tr>
<td>WRRR</td>
<td>02/29/2003</td>
<td>02/29/2003</td>
<td>Submitted</td>
<td>5</td>
</tr>
<tr>
<td>WTTT</td>
<td>03/19/2003</td>
<td>03/19/2003</td>
<td>In-Progress</td>
<td>19</td>
</tr>
<tr>
<td>KLTR</td>
<td>02/10/2003</td>
<td>02/10/2003</td>
<td>Submitted</td>
<td>7</td>
</tr>
<tr>
<td>KABC</td>
<td>04/05/2003</td>
<td>04/05/2003</td>
<td>Submitted</td>
<td>16</td>
</tr>
<tr>
<td>KCBS</td>
<td>02/19/2003</td>
<td>02/19/2003</td>
<td>Lockdown</td>
<td>2</td>
</tr>
<tr>
<td>WFLA</td>
<td>02/16/2003</td>
<td>02/16/2003</td>
<td>Submitted</td>
<td>1</td>
</tr>
<tr>
<td>WTSP</td>
<td>02/13/2003</td>
<td>02/13/2003</td>
<td>In-Progress</td>
<td>5</td>
</tr>
<tr>
<td>WROC</td>
<td>02/14/2003</td>
<td>02/14/2003</td>
<td>Submitted</td>
<td>2</td>
</tr>
<tr>
<td>WPPP</td>
<td>03/19/2003</td>
<td>03/19/2003</td>
<td>In-Progress</td>
<td>0</td>
</tr>
<tr>
<td>WRRR</td>
<td>02/19/2002</td>
<td>02/19/2002</td>
<td>Submitted</td>
<td>5</td>
</tr>
<tr>
<td>WTTT</td>
<td>02/19/2002</td>
<td>02/19/2002</td>
<td>In-Progress</td>
<td>0</td>
</tr>
<tr>
<td>WYYD</td>
<td>02/11/2002</td>
<td>02/11/2002</td>
<td>Submitted</td>
<td>7</td>
</tr>
<tr>
<td>KABC</td>
<td>02/19/2002</td>
<td>02/19/2002</td>
<td>Submitted</td>
<td>11</td>
</tr>
<tr>
<td>KCBS</td>
<td>02/19/2002</td>
<td>02/19/2002</td>
<td>Lockdown</td>
<td>12</td>
</tr>
<tr>
<td>WFLA</td>
<td>05/19/2002</td>
<td>05/19/2002</td>
<td>Submitted</td>
<td>1</td>
</tr>
<tr>
<td>WTSP</td>
<td>02/20/2002</td>
<td>02/20/2002</td>
<td>In-Progress</td>
<td>0</td>
</tr>
<tr>
<td>WROC</td>
<td>05/20/2002</td>
<td>05/20/2002</td>
<td>Submitted</td>
<td>2</td>
</tr>
<tr>
<td>WPPP</td>
<td>02/19/2003</td>
<td>02/19/2003</td>
<td>In-Progress</td>
<td>13</td>
</tr>
<tr>
<td>WRRR</td>
<td>02/19/2002</td>
<td>02/19/2002</td>
<td>Submitted</td>
<td>5</td>
</tr>
</tbody>
</table>
</div>
答案 0 :(得分：0)
尝试从此开始（未经测试）。它应该指向正确的方向，您需要做的就是在通过延迟创建表或通过从onload函数调用initSelectableTable来包含它。确保将表的ID设置为“SelectableTable”。
var OldColour = "";
var SelectedRow = null;
var SelectedColour = "#DFDFDF";
initSelectableTable("SelectableTable");
function onCellClicked(cell) {
if (cell.parentNode) {
if (SelectedRow) SelectedRow.style.backgroundColor = OldColour;
SelectedRow = cell.parentNode;
OldColour = SelectedRow.style.backgroundColor;
SelectedRow.style.backgroundColor = SelectedColour;
}
}
function initSelectableTable(tableid) {
var elTable = document.getElementById(tableid);
if (elTable) {
var cells = elTable.getElementsByTagName("td");
for (var i = 0; i < cells.length; i++) {
cells[i].onclick = function () { onCellClicked(this); }
}
}
}
希望它有所帮助...
答案 1 :(得分：0)
$('tbody tr').bind('click', function (evn){
$('tbody tr').css('background-color', 'white');
$(this).css('background-color', 'red');
});
http://jsfiddle.net/raghu2314/RCEKW/1/
这将解决问题，我已经测试过它正常工作
答案 2 :(得分：-2)
您只需通过以下代码（Jquery）
即可$(document).ready(function () {
$('#mstrTable tr').not('thead tr').click(function () {
$('#mstrTable tr').css('background-color', 'white');
$(this).css('background-color', '#DFDFDF');
});
});
修改
使用thead从选择中排除Not。