How to return the row and column index of a table cell by clicking

jquery get table cell value by row and column
javascript get table row cell value
html table row index
javascript get table row index onclick
how to get table row value in javascript
javascript get table cell value by id
row cells
html input in table cell

Please see the fiddle. When I click the cell, I can get the value and the column name. I wonder how can I get the row and column index instead? Following is the js code,

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

The best probably would be to use closest here:

For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

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

HTML DOM TableData cellIndex Property, Click on different cells to alert their index position: alert("Cell index is: " + Return the cellIndex property: Return the index position of each cell in a table row:. Drag the formula down to the other cells in the column by clicking and dragging the little “+” icon at the bottom-right of the cell. Figure 3. Get column index in Excel Table with MATCH function MATCH function returns the relative position of the cell G3 (Column name) in the Table 1 header range.

No need for jQuery, you can achieve it with native 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)
})

cell().index(), DataTables stores the data for rows and columns in internal indexes for fast The data structure returned for the cell in the result set, selected by cell() is: 'td', function () { alert( 'Clicked on cell in visible column: '+table.cell( this ).index(). Prepare a dummy HTML table for testing purpose. 'result' Div will show the corresponding row and column number when a particular cell of 'myTable' table is clicked.

index() can do the job. Just find the correct collection and current elements, to do 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>

Determine Click Position (Row and Column Number) on click of a , Prepare a dummy HTML table for testing purpose. 'result' Div will show the corresponding row and column number when a particular cell of '� Since all data in the C5:F8 is provided as the return_array XLOOKUP returns the range E5:E8 as a result, which spills into the range H5:H8. How this formula works. One of the nice benefits of XLOOKUP is it can easily return entire rows or columns as a lookup result. This can be done also with INDEX and MATCH, but the syntax is more complex.

Another Native JS way to do this is using TableData properties that can be found when using table elements. For example, cellIndex will return the column index of a td element and rowIndex will return the index of a tr element. These two properties will simplify our code by a ton, shown on the following code.

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>

Access table's row and cell using JavaScript, JavaScript access table's row and column. Access single cell (Click here to see live demo) second row and it's second column, So I used the 1 as the index in both the rows and the cells property. So it will return the “FIVE”. Return Multiple Lookup Values In One Comma Separated Cell ; In Excel, we can apply the VLOOKUP function to return the first matched value from a table cells, but, sometimes, we need to extract all matching values and then separated by a specific delimiter, such as comma, dash, etc… into a single cell as following screenshot shown.

use this

$(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 );
    });
});

Lookup multiple criteria in rows or columns - Xelplus, In this example, we have a table containing both the actual and budget revenues When using the Index Match approach, the first thing you identify is the map or the area Since the MATCH() function can only handle single rows and columns , the Click on cell I26 again and go to EVALUATE FORMULA to see how this� row = (int)(index / width) column = index % width I'm using % here since I'm a C guy and, though you haven't specified your language, it certainly looks like one of the C-based ones. If your question does not pertain to C or its brethren, it will be whatever the modulo operator is for your particular environment, the remainder left over when

React, After clicking a table cell, i need function to know exact row index and column index of it. In my case, i have a 3x3 table, with indexing from 0 - 2. function� To get back the index of the row or the selected item, use this code : Object object = table.getSelectionModel().selectedItemProperty().get(); int index = table.getSelectionModel().selectedIndexProperty().get();

Callbacks, Overview; Table Callbacks; Column Callbacks; Row Callbacks; Cell Callbacks The headerClick callback is triggered when a user left clicks on a column or group If you use this callback it must return the data to be parsed by Tabulator, the row was inserted into the table index:0, //the index column value for the row }. If you want to return the number stored in that first cell of each row: $('#thetable').find('tr').click( function() { var row = $(this).find('td:first').text(); alert('You clicked ' + row); }); Follow this answer to receive notifications. |.

MS Excel: How to use the INDEX Function (WS), examples. The Microsoft Excel INDEX function returns a value in a table based on the intersection of a row and column position within that table. Click here to visit our frequently asked questions about HTML5 video. In this example, the first parameter is A2:D6 which defines the range of cells that contains the data. To get the index of a column in an Excel Table, you can use the MATCH function. In the example shown, the formula in I4 is: =MATCH(H4,Table1[#Headers],0) When the formula is copied down, it returns an index for each column listed in column H.

Comments
  • Googlers: similar question, better answers (* better as in less code and straight to the point)
  • this is by far the cleanest vanilla approach