Question

请参阅fiddle。当我单击单元格时，我可以获取值和列名称。我想知道如何获得行和列索引呢？以下是js代码，

<script type="text/javascript">

    $(document).ready(function(){
        $('#example tbody').on( 'click', 'td', function () {
            alert('Data:'+$(this).html().trim());
            alert('Row:'+$(this).parent().find('td').html().trim());
            alert('Column:'+$('#example thead tr th').eq($(this).index()).html().trim());
        });
    });

</script>

Answer 1

不需要jQuery，你可以用原生JS实现它：

const table = document.querySelector('table');
const rows = document.querySelectorAll('tr');
const rowsArray = Array.from(rows);

table.addEventListener('click', (event) => {
  const rowIndex = rowsArray.findIndex(row => row.contains(event.target));
  const columns = Array.from(rowsArray[rowIndex].querySelectorAll('td'));
  const columnIndex = columns.findIndex(column => column == event.target);
  console.log(rowIndex, columnIndex)
})

Answer 2

最好的可能是在这里使用closest：

对于集合中的每个元素，通过测试元素本身并遍历DOM树中的祖先来获取与选择器匹配的第一个元素。

<script type="text/javascript">

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

</script>

Answer 3

index（）可以完成这项工作。只需找到正确的集合和当前元素即可 elementCollcetions.index（currentElement）

    $(document).ready(function(){
        $('#example tbody').on('click', 'td', function () {
               
	    alert('ColumnIndex:'+ $(this).parent().find('td').index(this));
	    alert('RowIndex:'+ $(this).parent().parent().find('tr').index($(this).parent()));
            
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="example"><tbody>
<tr><td>11</td><td>12</td></tr>

<tr><td>21</td><td>22</td></tr>
</tbody>
</table>

Answer 4

使用此

$(document).ready(function(){
    $('#example tbody').on( 'click', 'td', function () {   

        var column_num = parseInt( $(this).index() );
        alert('column index:'+column_num );

        var row_num = parseInt( $(this).parent().index() );  
        alert('rowindex:'+row_num );
    });
});

Answer 5

另一种本机JS方式是使用TableData属性，该属性在使用表元素时可以找到。例如，cellIndex将返回td元素的列索引，而rowIndex将返回tr元素的索引。这两个属性将简化我们的代码，如以下代码所示。

const cells = document.querySelectorAll('td');
cells.forEach(cell => {
  cell.addEventListener('click', () =>
    console.log("Row index: " + cell.closest('tr').rowIndex + " | Column index: " + cell.cellIndex));
});

<table>
  <tr>
    <td>0:0</td>
    <td>0:1</td>
    <td>0:2</td>
    <td>0:3</td>
  </tr>
  <tr>
    <td>1:0</td>
    <td>1:1</td>
    <td>1:2</td>
    <td>1:3</td>
  </tr>
  <tr>
    <td>2:0</td>
    <td>2:1</td>
    <td>2:2</td>
    <td>2:3</td>
  </tr>
</table>

如何通过单击返回表格单元格的行和列索引

5 个答案: