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

Question

enter image description here

I want to get a value of 53.54.57 but somehow I always get the value of 53.53.53 not as expected. anyone can help me? thank you for helping

   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(); I use this function to retrieve data from the datatable, but the line can only be the same value. always a value of 53, how to get the value of a line in the column called 'remove' Is my looping wrong? or is there another way to get that value?

Answer 1

Like @charlietfl said, it seems you're duplicating the element ids.

If I understood you correctly, and the id of your input(type number) is the value, then you only need to change one line:

$("#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
});

This is a working example:

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

Happy coding!