如何在数据表列 jquery 中获取值文本框并推送到变量？答案

【问题标题】：How to get value textbox in datatable column jquery and push to a variable?如何在数据表列 jquery 中获取值文本框并推送到变量？
【发布时间】：2020-11-08 04:45:50
【问题描述】：

我想得到一个 53.54.57 的值，但不知何故，我总是得到 53.53.53 的值，而不是预期的值。谁能帮帮我？

   columns: [
      { data: 'linenum' },
      { data: 'nama' },
      { data: 'harga' },
      { data: 'qty' },
      { data: 'total' },
      { data: 'remove' },
      { data: 'untung' },
    ]

 $("#table-main").DataTable().rows().every(function(){
      var data = this.data();
      var master_id = $("#" + $(data.remove).attr("id")).val();
     
      //53,54,57 is index column name = "remove"
      var master_barang_id;
      master_barang_id = $("#" + $(data.remove).attr("id")).val(); //the method I use to retrieve data
      alert(master_barang_id); //it should alert 53,54,57 BUT alerts only appear 53,53.53
    });

$("#" + $(data.remove).attr("id")).val(); 我使用此函数从数据表中检索数据，但该行只能是相同的值。始终为 53，如何获取名为“删除”的列中的一行的值
我的循环错了吗？还是有其他方法可以获得该值？

【问题讨论】：

如果您提供演示此问题的演示会有所帮助。我们不知道每一行的 data.remove 的值是什么，也不知道如何呈现各种元素 ID
听起来你在复制元素 ID，但这只是没有minimal reproducible example的猜测

标签： javascript jquery arrays datatables

【解决方案1】：

就像 @charlietfl 所说，您似乎在复制元素 ID。

如果我理解正确，你输入的id（类型号）就是值，那么你只需要更改一行：

$("#table-main").DataTable().rows().every(function(){
  var data = this.data();
  var master_id = $("#" + $(data.remove).attr("id")).val();
 
  //53,54,57 is index column name = "remove"
  var master_barang_id;
  
  //change this line
  //master_barang_id = $("#" + $(data.remove).attr("id")).val(); //the method I use to retrieve data

  //for this one
  master_barang_id = $("#" + data.remove).val();
  alert(master_barang_id); //it should alert 53,54,57 BUT alerts only appear 53,53.53
});

这是一个工作示例：

var jsonData = [{ "linenum": 1, "nama": "lampu economat 3w LED", "harga": 20000, "qty": 1, "total": 20000, "remove": 53, "untung": "X" }, { "linenum": 2, "nama": "lampu economat 5w LED", "harga": 25000, "qty": 1, "total": 25000, "remove": 54, "untung": "X" }, { "linenum": 3, "nama": "lampu economat 9w LED", "harga": 30000, "qty": 1, "total": 30000, "remove": 57, "untung": "X" }];

$("#btnGetData").click(function() {
    
  $("#table-main").DataTable().rows().every(function(){
      var data = this.data();
      
      var master_id = $("#" + $(data.remove).attr("id")).val();
      
      //53,54,57 is index column name = "remove"
      var master_barang_id = $("#" + data.remove).val(); //the method I use to retrieve data
      alert(master_barang_id); //it should alert 53,54,57 BUT alerts only appear 53,53.53
    });
});

var oTable = $('#table-main').DataTable({
  data: jsonData,
  columns: [
      { data: 'linenum' },
      { data: 'nama' },
      { 
        data: 'harga',
        "render": function (data, type, row, meta) {
                                return '<input type="text" value=' + data + ' />';
                          }
      },
      { 
        data: 'qty',
        "render": function (data, type, row, meta) {
                                return '<input type="number" value=' + data + ' />';
                          }
      },
      { data: 'total' },
      { 
        data: 'remove',
        "render": function (data, type, row, meta) {
                            return '<input type="number" id="' + data + '" value=' + data + ' />';
                            }
      },
      { data: 'untung' },
  ]
});

input {
  text-align: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet"/>
<div class="data-table-container">
  <table id="table-main" class="table cell-border order-column stripe">
    <thead>
    <tr>
        <th>linenum</th>
        <th>nama</th>
        <th>harga</th>
        <th>qty</th>
        <th>total</th>
        <th>remove</th>
        <th>untung</th>
    </tr>
    </thead>
  </table>
</div>
<br>
<input type="button" id="btnGetData" value="GET DATA" />

【讨论】：