获取表格的行索引javascript

Question

I know this question has been asked many times, I went through most of the suggestions and none of the solutions seem to be working for me.

I have a table in a modal in which I am allowing the user to make some changes. I then use these values to update the data in the database.

My table rows are created by echoing the HTML code

echo "<tr> ";                   
echo "<td > $row_counter  </td>";
echo "<td style='width:200px' class='left_align' > $lstr_product_name </td>";
echo "<td  > $lstr_department_name </td>";
echo "<td  > <input type='text' name='unit_cost' class='form-control unit_cost' style='width:50px;' value='$lint_unit_cost' /> <input name='product_id' data-id='$lint_product_id' class='form-control product_id' value='$lint_product_id' type='hidden'/> </td>";
echo "<td  > $lint_quantity_counted </td>";
echo "<td  > $lint_total_cost </td>";

To update the proper values in the database I need to get the product_id name which I know that I can get by

var x = document.getElementsByName("product_id")[0].value;

However I need to get the correct row index to be able to POST the correct product_id.

I have tried the following:

alert($(this).index()); 

But this always returns 0. The closest I got to a solution was by using

var rowID = $(this).closest('tr').index();
alert(rowID);

The problem with this is that my editable cell is "unit_cost" which is the 4th cell in the tr. This means that the closest tr is not the one that the row that the cell is in but the one below.

I have then tried

alert( "Row id: " + $("#tbl_store_product_sizes tr").this.rowIndex );

But also no luck. I have ran out of ideas, what is the proper way of doing this?

EDIT All my javascript code is enclosed in the $(document).ready(function() I am watching for the change of the unit_cost field using the following code

$(document.body).off( "change", ".unit_cost");
$(document.body).on('change', '.unit_cost', function(event) 
{

    var rowID = $(this).closest('tr').index();
    alert(rowID);
    var product_id = document.getElementsByName("product_id")[rowID].value;
    alert('The product id is: ' + x);
    var unit_cost = document.getElementsByName("unit_cost")[rowID].value;


});

Answer 1

Explanation:-

Since both inputs are in the same <td> , so on change of first-one you have to use .next() to get next input data.

You need to do it like below:-

$(document).on('change', '.unit_cost', function(event) {

    var rowID = $(this).closest('tr').index();
    alert(rowID);
    var product_id = $(this).next('.product_id').val();
    alert('The product id is: ' + product_id);
    var unit_cost = $(this).val();
});

Working snippet:-

 $(document).on('change', '.unit_cost', function(event) { var rowID = $(this).closest('tr').index(); alert('The corresponding row index is: '+ rowID); var product_id = $(this).next('.product_id').val(); alert('The product id is: ' + product_id); var unit_cost = $(this).val(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td>1</td> <td style='width:200px' class='left_align'>2 </td> <td>3 </td> <td> <input type='text' name='unit_cost' class='form-control unit_cost' style='width:50px;' value='4' /> <input name='product_id' data-id='$lint_product_id' class='form-control product_id' value='5' type="hidden"/> </td> <td>6</td> <td>7</td> </tr> <tr> <td>8</td> <td style='width:200px' class='left_align'>9 </td> <td>10 </td> <td> <input type='text' name='unit_cost' class='form-control unit_cost' style='width:50px;' value='11' /><input name='product_id' data-id='$lint_product_id' class='form-control product_id' value='12' type="hidden"/> </td> <td>13</td> <td>14</td> </tr> </table>