带有增量和减量输入的jquery数据表

如何解决带有增量和减量输入的jquery数据表

sample image:

嗨，我正在 jquery 数据表中进行递增和递减。每行在数量列上都有 +/- 按钮。我可以增加/减少值，但只能在第一行。当我在不同的行上点击 +/- 时，它仍然只影响第一行。

数据表：

                        {
                            "ajax": {
                                "url": '@Url.Content("~/Home/GetList")',"type": "GET","datatype": "json"
                            },"columns": [
                                { "data": "ItmID" },{ "data": "ItmDesc" },{ "data": "PackSize" },{ "data": "RecommCtnQty" },{
                                    "data": "ItmID","render": function (data,row) {
                                        return "</input><a class='btn btn-danger btn-sm' style='font-size:0.7rem;' onClick='decNumber()')><i class='fa fa-pencil'></i> -</a>";
                                    },"orderable": false,"searchable": false
                                },{
                                    "data": "ActualCtnQty",render: function (data,type,row) {
                                        return "<input class='input-group-text' id='qtyTextBox' type='text' style='font-size:0.7rem;width:100px;' value= " + row.ActualCtnQty + ">"
                                        
                                    }
                                },"render": function (data) {
                                        return "</input><a class='btn btn-danger btn-sm' id='incbutton' style='font-size:0.7rem;' onClick='incNumber()')><i class='fa fa-pencil'></i> +</a>";
                                        
                                    },{ "data": "SOHQty" },{ "data": "OnorderQty" },{ "data": "AveDailyForecastSalesQty",render: $.fn.dataTable.render.number(',','.',2,'') },{ "data": "DaysCover" },{ "data": "MinQty" },{ "data": "OnPromo" }```

   //  Increase number in text Box by 1
        function incNumber() {
            
                    var c = parseInt(document.getElementById("qtyTextBox").value);
                    c++;
                    document.getElementById("qtyTextBox").value = c;
                }

               // Decrease number in text Box by 1
        function decNumber() {

            var c = parseInt(document.getElementById("qtyTextBox").value);

                    if (c != 0) {
                    c--;
                    document.getElementById("qtyTextBox").value = c;
                    }
            }

解决方法

您有多个具有相同 ID 的文本框。您将不得不改用类选择器。

HTML

-filter_complex "[0:0][0:2]overlay[v]"

查询

<div class="container">
  <div class="row">
      <input type="text" class="myTextBoxes"/>
      <input type="button" value="Submit" class="myButtons" />
  </div>
  <br />
  <div class="row">
      <input type="text" class="myTextBoxes"/>
      <input type="button" value="Submit" class="myButtons" />
  </div>
  <br />
  <div class="row">
      <input type="text" class="myTextBoxes"/>
      <input type="button" value="Submit" class="myButtons" />
  </div>
</div>