获取表格javascript的行索引答案

【问题标题】：Get row index of a table javascript获取表格javascript的行索引
【发布时间】：2018-06-08 03:06:13
【问题描述】：

我知道这个问题已经被问过很多次了，我浏览了大部分建议，但似乎没有一个解决方案适合我。

我有一个模态表，我允许用户在其中进行一些更改。然后我使用这些值来更新数据库中的数据。

我的表格行是通过回显 HTML 代码创建的

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

要更新数据库中的正确值，我需要获取我知道可以通过的 product_id 名称

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

但是我需要获取正确的行索引才能发布正确的 product_id。

我尝试了以下方法：

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

但这总是返回 0。我最接近解决方案的是使用

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

问题在于我的可编辑单元格是“unit_cost”，它是 tr 中的第 4 个单元格。这意味着最接近的 tr 不是单元格所在的行，而是下面的行。

我试过了

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

但也没有运气。我已经没有想法了，这样做的正确方法是什么？

编辑我所有的 javascript 代码都包含在 $(document).ready(function() 我正在使用以下代码观察 unit_cost 字段的变化

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


});

【问题讨论】：

尝试向您的tr 添加一个类，例如'row'，然后调用：var rowID = $(this).closest('tr.row').index();
很抱歉，这是一个愚蠢的问题，但这有什么帮助呢？它仍然不会寻找与类行最接近的 tr，它仍然是实际行下方的那个吗？我只是不明白它背后的逻辑，你能解释一下吗？
如果我理解你的意思，你需要 next()，而不是最接近的()：$(this).parent().next('tr').index()？
不是真的，你看最接近（）；似乎正在获取下一行索引，而不是当前索引。因此，如果我编辑第一行，我希望得到 rowID = 0，但我得到 rowID = 1。除非最接近（）在返回值上使用不同的索引？
您的 HTML 无效，导致出现问题，请检查您的表单标签...jsfiddle.net/dzmuuxyu/1

标签： javascript php jquery html mysql

【解决方案1】：

解释：-

由于两个输入都在同一个<td> 中，因此在更改第一个时，您必须使用.next() 来获取下一个输入数据。

你需要像下面这样：-

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

工作 sn-p：-

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

【讨论】：