Javascript 从行到行单击时突出显示和取消突出显示表格行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14443533/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Highlighting and Un-Highlight a table row on click from row to row
提问by BaconJuice
I've been at this problem for awhile with no luck.
我在这个问题上已经有一段时间没有运气了。
Please note. No jquery =/
请注意。没有 jquery =/
The JS code I have is as following
我的JS代码如下
function highlight(){
var table = document.getElementById('dataTable');
for (var i=0;i < table.rows.length;i++){
table.rows[i].onclick= function () {
if(!this.hilite){
this.origColor=this.style.backgroundColor;
this.style.backgroundColor='#BCD4EC';
this.hilite = true;
}
else{
this.style.backgroundColor=this.origColor;
this.hilite = false;
}
}
}
}
The HTML is as following
HTML如下
<table id="dataTable">
<tr onclick="highlight()"><td>Data1</td><td>Data2</td></tr>
<tr onclick="highlight()"><td>Data1</td><td>Data2</td></tr>
<tr onclick="highlight()"><td>Data1</td><td>Data2</td></tr>
</table>
Currently when I click it changes color, however when I click on the second row the first row still remains highlighted. Could you please assist me in accomplishing this task with no jquery?
目前，当我单击它时会改变颜色，但是当我单击第二行时，第一行仍然保持突出显示。你能帮我在没有jquery的情况下完成这项任务吗？
Thank you.
谢谢你。
回答by Armaan Dhir
I was in the same problem recently and just solved it using pure JS Here is my version of it https://jsfiddle.net/armaandhir/Lgt1j68s/
我最近遇到了同样的问题，只是使用纯 JS 解决了它这是我的版本 https://jsfiddle.net/armaandhir/Lgt1j68s/
function highlight_row() {
var table = document.getElementById('display-table');
var cells = table.getElementsByTagName('td');
for (var i = 0; i < cells.length; i++) {
// Take each cell
var cell = cells[i];
// do something on onclick event for cell
cell.onclick = function () {
// Get the row id where the cell exists
var rowId = this.parentNode.rowIndex;
var rowsNotSelected = table.getElementsByTagName('tr');
for (var row = 0; row < rowsNotSelected.length; row++) {
rowsNotSelected[row].style.backgroundColor = "";
rowsNotSelected[row].classList.remove('selected');
}
var rowSelected = table.getElementsByTagName('tr')[rowId];
rowSelected.style.backgroundColor = "yellow";
rowSelected.className += " selected";
msg = 'The ID of the company is: ';
msg += rowSelected.cells[0].innerHTML;
msg += '\nThe cell value is: ' + this.innerHTML;
alert(msg);
}
}
} //end of function
window.onload = highlight_row;
回答by macino
you need to un-highlight the other rows, because now you are just changing the clicked one.
您需要取消突出显示其他行，因为现在您只是在更改单击的行。
function highlight(){
var table = document.getElementById('dataTable');
for (var i=0;i < table.rows.length;i++){
table.rows[i].onclick= function () {
if(!this.hilite){
unhighlight();
this.origColor=this.style.backgroundColor;
this.style.backgroundColor='#BCD4EC';
this.hilite = true;
}
else{
this.style.backgroundColor=this.origColor;
this.hilite = false;
}
}
}
}
function unhighlight(){
var table = document.getElementById('dataTable');
for (var i=0;i < table.rows.length;i++){
var row = table.rows[i];
row.style.backgroundColor=this.origColor;
row.hilite = false;
}
}
回答by Richard YS
I've created a working example of the following on JSFiddle
我在JSFiddle上创建了以下工作示例
Javascript:
Javascript：
function toggleClass(el, className) {
if (el.className.indexOf(className) >= 0) {
el.className = el.className.replace(className,"");
}
else {
el.className += className;
}
}
HTML:
HTML：
<table class="gridview">
<tr onclick="toggleClass(this,'selected');"><td></td><td></td></tr>
<tr onclick="toggleClass(this,'selected');"><td></td><td></td></tr>
<tr onclick="toggleClass(this,'selected');"><td></td><td></td></tr>
</table>
CSS:
CSS：
.gridview .selected, .gridview tbody .selected {
background-color: #6ccbfb;
color: #fff;
}
回答by stephen carvalho
not able to unhighlight rows when deselected
取消选择时无法取消突出显示行
<script type="text/javascript">
function highlight(){
var hilite;
var table = document.getElementById('dataTable');
for (var i=0;i < table.rows.length;i++){
table.rows[i].onclick= function () {
if(!this.hilite){
unhighlight();
this.origColor=this.style.backgroundColor;
this.style.backgroundColor='#fdee9a';
this.hilite = true;
}
else{
this.style.backgroundColor=this.origColor;
this.hilite = false;
}
}
}
}
function unhighlight(){
var hilite;
var table = document.getElementById('dataTable');
for (var i=0;i < table.rows.length;i++){
var row = table.rows[i];
row.style.backgroundColor=this.origColor;
row.hilite = false;
}
}
</script>
回答by Cybernetic
You can use Azleif you provide a class name and id to each row:
如果为每一行提供类名和 id，则可以使用Azle：
HTML
HTML
<table class="dataTable">
<tr class='dataTable_row' id='row_a'><td>Data1</td><td>Data2</td></tr>
<tr class='dataTable_row' id='row_b'><td>Data1</td><td>Data2</td></tr>
<tr class='dataTable_row' id='row_c'><td>Data1</td><td>Data2</td></tr>
</table>
AZLE
AZLE
create_azle(function() {
az.highlight_row_on_click('dataTable', 1, 'limegreen')
})
Result:
结果：
Here is the FIDDLE
这是小提琴
If you're creating larger tables, you'll need to be sure the table has rendered prior to attaching events. You can use Azle's call_once_satisfied function:
如果您要创建更大的表格，则需要确保在附加事件之前表格已呈现。你可以使用 Azle 的 call_once_satisfied 函数：
az.call_once_satisfied({
"condition" : "az.get_row_count('my_table', 1) > 0",
"function" : "az.highlight_row_on_click('my_table', 1, 'limegreen')"
})
Here's an example, where the table is created from an API call, and the highlight event attached once the table has rendered:
下面是一个示例，其中表格是通过 API 调用创建的，并且在表格呈现后附加高亮事件：
Here is the FIDDLEfor this one.
这是这个的小提琴。
