Question

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

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

我的表行是通过回显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);

这个问题是我的可编辑单元格是＆＃34; unit_cost＆＃34;这是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;


});

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

工作代码段： -

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

获取表javascript的行索引

1 个答案: