Question

我有一个数据表，我在每一行的一列中填充文本字段。我试图从这些文本字段中获取值，但是它总是采用第一列的文本字段值，因为我假设每个填充的文本字段的ID始终相同。我该如何解决这个问题？我是否还必须为每个文本字段填充动态ID名称？顺便说一下，我通过jQuery获得了价值。

使用这段代码：

var qty = $("#input").val();

我将通过Ajax调用将此“ qty”变量发送到php代码。 Ajax调用工作正常，发送变量，我已经检查了它，所以不是问题。

表声明代码：

var table3 =  $("#last3").DataTable({

                                    "columnDefs": [
                                {
                                "targets": 4,
                                "data": null,
                                "defaultContent": '<input id="input" type="number"  value="" min="1" max="9"></input>'
                                },

                                {
                                "targets": 3,
                                "data": null,
                                "defaultContent": '<input type="button" value="Add" class="btn-add" style="width:100%; height:100%;"></input>'
                                },

                                { "searchable": false, "targets": 0 } ],

                                select:false,

                                "scrollY": "32vh",
                                "scrollCollapse": true,
                                "paging": false,
                            });

编辑1：我有这段代码，它动态创建一个单元格值并将其递增1，因此基本上创建了一个索引列。我只是想知道是否有一种方法可以修改它，以便以某种方式填充“ id”属性，而不是填充cell.innerhtml。这样，我将为每个文本字段具有唯一的id属性。（尽管不必是id，我也可以通过“名称”属性来获取值。）

table3.column(4, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {cell.innerHTML = i+1;}

Answer 1

由于分页，搜索等原因，您需要在表格绘制后绑定按钮添加。正如我在评论中所述，在迭代器内部您具有单元参数，您可以在其中进行搜索以找到输入，然后处理用它。

也许对您有帮助：

$(document).ready(function() {


  var table3 = $("#last3").DataTable({

    "columnDefs": [{
        "targets": 4,
        "data": null,
        "defaultContent": '<input id="input" type="number" class="table-input"  value="" min="1" max="9"></input>'
      },

      {
        "targets": 3,
        "data": null,
        "defaultContent": '<input type="button" value="Add" class="btn-add" style="width:100%; height:100%;"></input>'
      },

      {
        "searchable": false,
        "targets": 0
      }
    ],

    select: false,

    "scrollY": "32vh",
    "scrollCollapse": true,
    "paging": false,
  }).on('draw.dt', function() {
    $("#last3 tr").on("click", ".btn-add", function() {
      var data = table3.DataTable().row($(this).closest('tr')).data();
      console.log(data);
    })
  });


  table3.column(4, {
    search: 'applied',
    order: 'applied'
  }).nodes().each(function(cell, i) {
    var $input = $(cell).find('input');
    $input.attr({
      'id': ($input.attr('id') + i),
      'value': i
    });
  }).draw();;

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.18/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>



<table id="last3" class="display">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1 Data 1</td>
      <td>Row 1 Data 2</td>
      <td>Row 1 Data 3</td>
      <td>Row 1 Data 4</td>
      <td>Row 1 Data 5</td>
    </tr>
    <tr>
      <td>Row 2 Data 1</td>
      <td>Row 2 Data 2</td>
      <td>Row 2 Data 3</td>
      <td>Row 2 Data 4</td>
      <td>Row 2 Data 5</td>
    </tr>
    <tr>
      <td>Row 3 Data 1</td>
      <td>Row 3 Data 2</td>
      <td>Row 3 Data 3</td>
      <td>Row 3 Data 4</td>
      <td>Row 3 Data 5</td>
    </tr>
    <tr>
      <td>Row 4 Data 1</td>
      <td>Row 4 Data 2</td>
      <td>Row 4 Data 3</td>
      <td>Row 4 Data 4</td>
      <td>Row 4 Data 5</td>
    </tr>
  </tbody>
</table>

如何获取数据表列中填充文本输入字段的值

1 个答案: