使用jQuery each（）使用该行上的按钮提取表行数据

TLDR

我希望下面的脚本返回按钮单击的表行的<input id和value 。现在它始终只返回第一行的信息，无论按钮位于哪一行。

---

我认为我想要做的很简单，而且我认为我非常接近。 但这对我来说都是一个学习过程，所以它就是这样 可能 可能是我犯了初学者的错误。

我正在建一个购物车。 我有一个在foreach循环中构建的表行。 基本要点是这样的（使用刀片）：

  @foreach($cart as $c)  {{ $c['name'] }} {{ $c['price'] }}     @endforeach 

在此循环中创建的所有行都在表单中。 我已经有一个这个表单的提交按钮（在循环外）来更新数量。

我最终要做的是让表格行的“删除”按钮将特定行的数量字段设置为零并提交表单（通过现有表单提交按钮），从而“删除”项目大车。 这可以通过将数量字段设置为零手动完成，我只是认为应该有一个删除按钮，正如大多数人所期望的那样。

我要做的第一步是返回按钮单击的表行的<input id和value 。

我的脚本如下：

 $(document).ready(function() { $(".row-item").each(function(i) { var fieldValue = $(".quantity").val(); var fieldId = $(".quantity").attr('id'); $("#remove" + i).click(function(e) { console.log(fieldValue, fieldId); e.preventDefault(); }); }); }); 

这工作……有点儿。 无论我单击哪一行的删除按钮，控制台都会显示第一个.row-item 。

4 2e9f9685813dee35a13376eccb21431b

那很棒。 这基本上就是我追求的目标。 我可以稍后处理这些信息，我只需要先获取相应的信息:)

但是，如果我单击另一行上的删除按钮，我会得到完全相同的东西。 很明显，我的迭代不能像我想的那样工作。

在这里小提琴

_{我不得不对小提琴中的一些变量进行硬编码}

---

编辑

好的， 这个答案的作用是我可以将所有各种数据输入控制台。 那是进步！ 但我还不确定如何使用我的“删除”按钮…

Answer 1

您可以通过使用jQuery遍历DOM而不是迭代并以这种方式查找内容来轻松完成此操作。

这是一些工作代码和更新的小提琴 ：

 $(document).ready(function () { $('#product-table').on( 'click', '.btn-remove', function( event ) { var $tr = $(this).closest('tr'); $tr.find('.quantity').val( '0' ); $tr.find('.total').text( '0.00' ); // Submit your form here }); }); 

此代码使用事件委派，因此它只添加一个事件侦听器来处理所有 Delete按钮。

我对您的HTML进行了一些更改以使用此代码：

• 在主


  添加了id="product-table" 。

• 为每个“总” 元素添加了class="total" 。