Question

我正在尝试使用每个单元格中的按钮获取所选行的列的值。这是我的Jquery，

$('.sampleBtn').click(function(){
  var row = $(this).closest('td');
  var col = $(this).parent().children().index($(this));
  var id = row.find('.mainId').val();
  var level = row.find('.level').val();

  alert("Main ID "+id+" Job ID "+col+" Level "+level);
});

当我使用可点击的单元格时，它正常运行，但是当我使用按钮时，即使我单击其他单元格中的按钮，它也总是在第3列中显示Im。

视图中的表格，

 <?php foreach($mains as $temp): ?>
<tbody>
  <tr>
    <td>
      <input type="hidden" value="<?php echo $temp->Main_ID; ?>"/><?php echo $temp->Main_Name; ?>
    </td>
    <td>
      <select class="level">
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
      <input type="hidden" class="mainId" value="<?php echo $temp->Main_ID; ?>" />
      <input type="button" class="sampleBtn" value="Update" />
    </td>
  </tr>
</tbody>
<?php endforeach; ?>

Answer 1

这是因为您在更改触发的DOM元素后没有更新$(this)引用。按钮的this范围是<input>元素，单元格为<td>。因此，您需要更新脚本中的this引用。

$('.sampleBtn').click(function(){
  var row = $(this).closest('td');
  // Changed *this* to *row* below to point at the <td>
  var col = row.parent().children().index(row);
  var id = row.find('.mainId').val();
  var level = row.find('.level').val();

  alert("Main ID "+id+" Job ID "+col+" Level "+level);
});

Answer 2

请注意：我认为获取按钮索引的最佳方法是：

var col = $('.sampleBtn').index(this);

而不是：

var col = row.parent().children().index(row);

试一试：

https://jsfiddle.net/romadcxn/1/

使用JQuery获取表中所选行和列的值

2 个答案: