Html Table RowIndex for Dynamic Rows

Rameez Javed

Hi, can anyone guide me regarding finding row index of html table using javascript jquery, what I'm doing is, I've created a empty row in var, on add row i just clone that empty row. Now I want to get some specific column value of a row (in which user is adding values), I want to get row index and then want to get specific column value by ClassName in that particular index. I've found the code for getting row index but the issue is it only works for the first row (0 index), not for any other... Here is the code.

$('#myTableId').find('tr').click(function () {
alert('You clicked row ' + ($(this).index() + 1));
});

7 Replies

Know the answer? Post it — somebody with the same question will find it here.

Suraj Kumar6y ago
Accepted answer
Here you are missing something like you have not given id of the table.
<table id="myTableId">
  <tr onclick="myFunction(this)">
    <td>
      Click to show rowIndex
      <input type="text" name="xyz" value="Person A"/>
    td>
  tr>
  <tr onclick="myFunction(this)">
    <td>Click to show rowIndex
     <input type="text" name="xyz" value="Person B"/>td>
  tr>
  <tr onclick="myFunction(this)">
    <td>Click to show rowIndex
    <input type="text" name="xyz" value="Person C"/>td>
  tr>
  <tr onclick="myFunction(this)">
    <td>Click to show rowIndex
    <input type="text" name="xyz" value="Person D"/>td>
  tr>
table>
The function will be as shown below.
function myFunction(x) {
var index = x.rowIndex;
console.log("Row index is: " + x.rowIndex);
var myValue = $('#myTableId tr').eq(index).find('td').eq(0).find("input[name=xyz]").val();
console.log(myValue);
}
You can find the live demo on the link - https://codepen.io/surajskm/pen/WNbMzRr?editors=1111
Jignesh Kumar6y ago
you can try this to get values of row,

http://jsfiddle.net/beME9/
Rameez Javed6y ago
can anyone help me to get specific column value on this row index, I'm trying this.
function myFunction(x) {
            var index = x.rowIndex;
            console.log("Row index is: " + x.rowIndex);
            var myValue = $('myTableId').rows[index].cells[0].find("input[name=xyz]").value;


            alert(myValue );
        }
but in console i get this error
Uncaught TypeError: Cannot read property '1' of undefined
Rameez Javed6y ago
@Suraj Kumar this is working fine. Thanks buddy.
Rameez Javed6y ago
@Jignesh Kumar same issue, 0 index working fine but others are not...
Jignesh Kumar6y ago
Hi Rameez,

Please try below code,
$('#myTableId tr').click(function () {
var index = $('#myTableId tr').index(this);
alert('You Clicked row ' + index);
});
Suraj Kumar6y ago
You could try this by creating a function on the click of each row as shown below.
<table>
  <tr onclick="myFunction(this)">
    <td>Click to show rowIndextd>
  tr>
  <tr onclick="myFunction(this)">
    <td>Click to show rowIndextd>
  tr>
  <tr onclick="myFunction(this)">
    <td>Click to show rowIndextd>
  tr>
  <tr onclick="myFunction(this)">
    <td>Click to show rowIndextd>
  tr>
table>
And the myFunction(x) will be as below.
function myFunction(x) {
  console.log("Row index is: " + x.rowIndex);
}

Html Table RowIndex for Dynamic Rows

@Jignesh Kumar same issue, 0 index working fine but others are not...