请参阅fiddle。当我单击单元格时，我可以获得列索引和行索引。我想知道如何使用这些索引来改变表的颜色？以下是Javascript代码：
$('#example tbody').on( 'click', 'td', function () {
alert('Row ' + $(this).closest("tr").index());
alert('Column ' + $(this).closest("td").index());
});
我必须使用索引而不是$(this).color()的原因是我必须保存索引以更改另一个表的单元格颜色。
答案 0 :(得分：2)
更改您的JS代码如下
$(document).ready(function() {
$("table tbody tr td").on("click", function() {
$(this).closest("table").find("td").css({
backgroundColor: "white"
});
$(this).css({
backgroundColor: "red"
});
});
});
我已经创建了CodePen，请看一下。
https://codepen.io/trgiangvp3/full/wqrwao/
答案 1 :(得分：0)
尝试这样的方法来获取ID的元素，你也可以使用标记名称来实现：
var table = document.getElementById("table"),rIndex,cIndex;
// table rows
for(var i = 1; i < table.rows.length; i++)
{
// row cells
for(var j = 0; j < table.rows[i].cells.length; j++)
{
table.rows[i].cells[j].onclick = function()
{
rIndex = this.parentElement.rowIndex;
cIndex = this.cellIndex+1;
console.log("Row : "+rIndex+" , Cell : "+cIndex);
};
}
}
</script>
答案 2 :(得分：0)
检查此示例
$(document).ready(function(){
$('#example td').on( 'click', function () {
var trIndex = $(this).closest("tr").index();
var tdIndex = $(this).closest("td").index();
$('#example td, #example2 td').removeClass('red');
$(this).addClass('red');
$('#example2 tbody tr:eq('+trIndex+') td:eq('+tdIndex+')').addClass('red');
});
});#example tbody tr td{ border:1px solid black}
#example2 tbody tr td{ border:1px solid black;}
.divider {height:40px; width:100%; background:#bfbfbf;}
.red {
background:red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellspacing="0" width="100%" class="display nowrap dataTable dtr-inline" id="example" role="grid" aria-describedby="example_info" style="width: 100%;">
<thead>
<tr role="row">
<th class="sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 133px;" aria-sort="ascending" aria-label="Name: activate to sort column descending">
Name
</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 224px;" aria-label="Position: activate to sort column ascending">
Position
</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 100px;" aria-label="Office: activate to sort column ascending">
Office
</th>
<th class="dt-body-right sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 41px;" aria-label="Age: activate to sort column ascending">
Age
</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 92px;" aria-label="Start date: activate to sort column ascending">
Start date
</th>
<th class="dt-body-right sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 77px;" aria-label="Salary: activate to sort column ascending">
Salary
</th>
</tr>
</thead>
<tfoot>
<tr>
<th rowspan="1" colspan="1">
Name
</th>
<th rowspan="1" colspan="1">
Position
</th>
<th rowspan="1" colspan="1">
Office
</th>
<th class="dt-body-right" rowspan="1" colspan="1">
Age
</th>
<th rowspan="1" colspan="1">
Start date
</th>
<th class="dt-body-right" rowspan="1" colspan="1">
Salary
</th>
</tr>
</tfoot>
<tbody>
<tr role="row" class="odd">
<td class="sorting_1">
Brenden Wagner
</td>
<td>
Software Engineer
</td>
<td>
San Francisco
</td>
<td class=" dt-body-right">
28
</td>
<td>
2011/06/07
</td>
<td class=" dt-body-right">
$206,850
</td>
</tr>
<tr role="row" class="even">
<td class="sorting_1">
Brielle Williamson
</td>
<td>
Integration Specialist
</td>
<td>
New York
</td>
<td class=" dt-body-right">
61
</td>
<td>
2012/12/02
</td>
<td class=" dt-body-right">
$372,000
</td>
</tr>
<tr role="row" class="odd">
<td class="sorting_1">
Bruno Nash
</td>
<td>
Software Engineer
</td>
<td>
London
</td>
<td class=" dt-body-right">
38
</td>
<td>
2011/05/03
</td>
<td class=" dt-body-right">
$163,500
</td>
</tr>
<tr role="row" class="even">
<td class="sorting_1">
Caesar Vance
</td>
<td>
Pre-Sales Support
</td>
<td>
New York
</td>
<td class=" dt-body-right">
21
</td>
<td>
2011/12/12
</td>
<td class=" dt-body-right">
$106,450
</td>
</tr>
</tbody>
</table>
<div class="divider"></div>
<table cellspacing="0" width="100%" class="display nowrap dataTable dtr-inline" id="example2" role="grid" aria-describedby="example_info" style="width: 100%;">
<thead>
<tr role="row">
<th class="sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 133px;" aria-sort="ascending" aria-label="Name: activate to sort column descending">
Name
</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 224px;" aria-label="Position: activate to sort column ascending">
Position
</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 100px;" aria-label="Office: activate to sort column ascending">
Office
</th>
<th class="dt-body-right sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 41px;" aria-label="Age: activate to sort column ascending">
Age
</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 92px;" aria-label="Start date: activate to sort column ascending">
Start date
</th>
<th class="dt-body-right sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 77px;" aria-label="Salary: activate to sort column ascending">
Salary
</th>
</tr>
</thead>
<tfoot>
<tr>
<th rowspan="1" colspan="1">
Name
</th>
<th rowspan="1" colspan="1">
Position
</th>
<th rowspan="1" colspan="1">
Office
</th>
<th class="dt-body-right" rowspan="1" colspan="1">
Age
</th>
<th rowspan="1" colspan="1">
Start date
</th>
<th class="dt-body-right" rowspan="1" colspan="1">
Salary
</th>
</tr>
</tfoot>
<tbody>
<tr role="row" class="odd">
<td class="sorting_1">
Airi Satou
</td>
<td>
Accountant
</td>
<td>
Tokyo
</td>
<td class=" dt-body-right">
33
</td>
<td>
2008/11/28
</td>
<td class=" dt-body-right">
$162,700
</td>
</tr>
<tr role="row" class="even">
<td class="sorting_1">
Angelica Ramos
</td>
<td>
Chief Executive Officer (CEO)
</td>
<td>
London
</td>
<td class=" dt-body-right">
47
</td>
<td>
2009/10/09
</td>
<td class=" dt-body-right">
$1,200,000
</td>
</tr>
<tr role="row" class="odd">
<td class="sorting_1">
Ashton Cox
</td>
<td>
Junior Technical Author
</td>
<td>
San Francisco
</td>
<td class=" dt-body-right">
66
</td>
<td>
2009/01/12
</td>
<td class=" dt-body-right">
$86,000
</td>
</tr>
<tr role="row" class="even">
<td class="sorting_1">
Bradley Greer
</td>
<td>
Software Engineer
</td>
<td>
London
</td>
<td class=" dt-body-right">
41
</td>
<td>
2012/10/13
</td>
<td class=" dt-body-right">
$132,000
</td>
</tr>
<tr role="row" class="odd">
<td class="sorting_1">
Brenden Wagner
</td>
<td>
Software Engineer
</td>
<td>
San Francisco
</td>
<td class=" dt-body-right">
28
</td>
<td>
2011/06/07
</td>
<td class=" dt-body-right">
$206,850
</td>
</tr>
</tbody>
</table>