具有增量和减量输入的jquery数据表答案

【问题标题】：jquery datatable with Increment and decrement input具有增量和减量输入的jquery数据表
【发布时间】：2020-12-30 22:58:34
【问题描述】：

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 + ">"
                                        
                                    }
                                },
                                {
                                    "data": "ItmID", "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>";
                                        
                                    },
                                    "orderable": false,
                                    "searchable": false
                                },
                                { "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;
                    }
            }

【问题讨论】：

标签： javascript jquery asp.net-mvc datatables asp.net-ajax

【解决方案1】：

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

HTML

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

jQuery

$(document).ready(function () {

  $('.myButtons').click(function () {

      // get index of button clicked first and then find the textbox by index
      var clickedButtonIndex = $('.myButtons').index(this);
      var selectedTextBox = $('.myTextBoxes').eq(clickedButtonIndex).val();
      selectedTextBox++;
      alert(selectedTextBox);
  });
});

【讨论】：