如何只在 table 中为选定的行调用函数 JS？

Question

我正在尝试仅增加第二行的数量，但增加的是第一行而不是第二行？！

这是我的代码 Html 我的 table :

<table class="table">
  <thead>
    <tr>
      <th class="">Item Name</th>
      <th class="">Item Price</th>
      <th class="">Quantité</th>
      <th class="">Actions</th>
    </tr>
  </thead>
  @foreach(var item in @Model.panierWebs) {

    <tbody>
      <tr class="">
        <td class="">
          <div class="product-info">
            <img width="80" src="@Url.Content(item.Image)" alt="" />
            <a href="#!"> @Html.DisplayFor(modelItem => item.Model) </a>
          </div>
        </td>
        <td class=""> @Html.DisplayFor(modelItem => item.Prix) DA</td>
        <td class="">
          <div class="quantity buttons_added">
            <input onclick="decrement(@item.Prix,@item.Qte)" type="button" value="-" class="minus"><input type="number" name="quantity" id="qte" value="@item.Qte" title="Qty" class="input-text qty text" pattern="" inputmode=""><input onclick="increment(@item.Prix,@item.Qte)"
              type="button" value="+" class="plus">
          </div>
        </td>
    
        <td class="">
          <a onclick="remove(@item.Id)" class="product-remove" href="#!">Remove</a>
        </td>
      </tr>
    
    </tbody>
  }
</table>

和我的递增和递减Qte Script JS :

function decrement(prix, qte) {
  console.log("qte avant dec" + document.getElementById("qte").value);

  if (parseInt(document.getElementById("qte").value) != 1) {
    qte = parseInt(document.getElementById("qte").value) - 1; // increment qte
    console.log("qte apres dec" + qte);
    $("#qte").val(qte); // affecter la nouvelle valeur de qte
    var currenttotal = document.getElementById("total").value; // calculer le nouveau total
    var newtotal = parseFloat(currenttotal) - parseFloat(prix);
    $("#total").val(newtotal);
  }
}

function increment(prix, qte) {
  console.log("qte avant incr" + document.getElementById("qte").value);

  if (parseInt(document.getElementById("qte").value) <= 5) {
    qte = parseInt(document.getElementById("qte").value) + 1; // increment qte
    console.log("qte apres incr" + qte);
    $("#qte").val(qte); // affecter la nouvelle valeur de qte
    var currenttotal = document.getElementById("total").value; // calculer le nouveau total
    var newtotal = parseFloat(currenttotal) + parseFloat(prix);
    $("#total").val(newtotal);
  }
}

Answer 1

首先，解决一些问题：

您必须避免在 DOM 中使用重复的标识符。您可以使用 class 并使用 classes 而不是 ids。
此外，您的 foreach 中有 tbody，使您的 table 有很多 tbody。您必须将 tbody 标签放在 foreach

解决问题的方法是使用调用函数的具体标记（+ 和 - 按钮）。为此，请将参数“this”添加到您的函数中。 “this”是您点击的输入按钮

<input onclick="decrement(this,@item.Prix,@item.Qte)" ...>
<input type="number" ...>
<input onclick="increment(this,@item.Prix,@item.Qte)" ...>

并稍微修改一下您的函数：

function increment(input, prix, qte) {
   var number = $(input).closest("div").find("input[type=number]")
   var inputVal = parseInt(number.val());

   if (inputVal <= 5) {
       qte = inputVal + 1; // increment qte
       console.log("qte apres incr" + qte);
       number.val(qte); // affecter la nouvelle valeur de qte               

       // ... your total part
   }
}

$(input).closest("div") 为您提供包含按钮和文本框的 div。在那个 div 中，您搜索 type=number 的输入（文本框），获取它的值并完成工作

如何只在 table 中为选定的行调用函数 JS？

How to call function JS for selected row only in table?

html

javascript

css

ajax

jquery