請參閱fiddle。當我單擊單元格時，我可以獲得列索引和行索引。我不知道如何使用這些索引來改變表的顏色？以下是Javascript代碼：如何通過行和列的索引更改表格單元格的顏色？
$('#example tbody').on('click', 'td', function() {
alert('Row ' + $(this).closest("tr").index());
alert('Column ' + $(this).closest("td").index());
});
我之所以必須使用的，而不是$(this).color()指標是我要救索引也改變另一個表單元格顏色。
更改您的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/
感謝您的幫助！它在一張桌子內很好地工作。也許我沒有問清楚。我已經更新了我的問題。這是關於'另一張桌子'。 – WCMC
嘗試這樣的事情來獲得由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>
檢查這個例子
$(document).ready(function(){
$('#example td').on('click', function() {
\t \t 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>
'$（本）的.css（ '背景色'， '紅'）'？ –
$（ '＃示例TBODY'）上（ '點擊'， 'TD'，函數（）{ $（本）的.css（{ 的backgroundColor： 「紅色」 }）; }）。 – ihpar
謝謝你們。我必須使用索引，因爲我需要索引來更改另一個表格單元格的顏色。另外，當下次單擊另一個單元格時，我需要重新對所有單元格着色，以便只有被單擊的單元格才具有紅色。 – WCMC