如何通过行和列的索引更改表格单元格的颜色？

Question

请参阅fiddle。当我单击单元格时，我可以获得列索引和行索引。我想知道如何使用这些索引来改变表的颜色？以下是Javascript代码：

 $('#example tbody').on( 'click', 'td', function () {
            alert('Row ' + $(this).closest("tr").index());
            alert('Column ' + $(this).closest("td").index());
 });

我必须使用索引而不是$(this).color()的原因是我必须保存索引以更改另一个表的单元格颜色。

Answer 1

更改您的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/

Answer 2

尝试这样的方法来获取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>

Answer 3

检查此示例

    $(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>