行と列のインデックスで表のセルの色を変更するにはどうすればよいですか？

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() { 
 
     \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>