如何在标签输入中搜索数据并使用javascript向表格显示数据？

Question

我有一个用javascript搜索和显示数据到表格的问题。我有格式json的数据，但所有它不能显示在表格第一行，而在控制台log.data显示五行。如何解决这个问题。非常感谢你们，我希望在这里解决。

这是数据：

var data =[ 
    {header_id:"TR100001" detail_id:"2" item_code:"SPH001" price:"4000" weight:"2"}, 
    {header_id:"TR100001" detail_id:"3" item_code:"SPH002" price:"4500" weight:"2"}, 
    {header_id:"TR100001" detail_id:"4" item_code:"SPH003" price:"30000"weight:"2"}, 
    {header_id:"TR100001" detail_id:"5" item_code:"SPH004" price:"45000"weight:"2"}]; 

这是浏览：

<div class="row"> 
    <div class="col-md-12"> 
     <div class="table-responsive">           
    <table id="buy_transaction" class="table table-bordered table-hover table-striped sticky-header"> 
       <thead class="bg-success"> 
          <tr> 
          <th width="1">&#9745</th> 

          <th width="5"><b>Detail</b></th> 
          <th><b>Item Code</b></th>           

          <th><b>Price</b></th> 

          <th><b>Weight</b></th> 



          </tr>           
       </thead> 

      <tbody id="dataTable2"> 
       <table id="buy_transaction"> 
         <tbody id="dataTable2"> 
         <td><input type="checkbox" class="chk" name="chk[]" value="<?php echo $detail->detail_id; ?>"></td> 
         <td><input type="text" id="detail_id" name="detail_id[]" class="detail_id form-control" value="<?php echo $detail->detail_id ;?>" size="1">       </td> 

         <td><input type="text" width="10" class="item_code form-control" id="item_code" name="item_code[]" value="<?php echo $detail->item_code; ?>"></td> 
         <td><input type="text"  class="header_id1 form-control" id="header_id" name="header_id[]" value="<?php echo $detail->header_id; ?>" readonly ></td> 
         <td><input type="text"  class="price form-control" id="price"  name="price[]"  value="<?php echo $detail->price; ?>" readonly ></td> 

         <td><input type="text"  class="weight form-control" id="weight" name="weight[]" placeholder="0" value="<?php echo $detail->weight; ?>"></td> 
        </table> 
      </div> 
     </div> 
    </div> 

这是JavaScript代码：

 <script type="text/javascript"> 
     function getdHeaderid(header_id){ 
      var header_id = header_id.val(); 


      $.ajax({ 
        type : "post", 
        data : {header_id:header_id},      
        url  : "<?php echo base_url();?>index.php/transaction/selltransaction/get_dtHeaderid", 
        dataType:"json", 
        cache :false, 
        success: function(data){ 
         console.log(data); 

         for(var i=0; i< data.length; i++){ 
          var obj=data[i]; 


          $(".header_id").val(obj.header_id); 
          $(".detail_id").val(obj.detail_id); 
          $(".item_code").val(obj.item_code); 
          $(".price").val(obj.price); 
          $(".weight").val(obj.weight); 


          } 
         } 

      }); 
     } 
    $(document).ready(function() { 
    $('.header_id').on('keyup', function() { 
     getdHeaderid($(this)); 

    }); 
    }); 

</script> 

Answer 1

你的问题的措辞是相当难以理解，但以我的最好的猜测你在找什么 - 你想要一个来自数据的每个元素的表格行。如果是这样，这里是你如何做到这一点。

var data = [{ 
 
    header_id: "TR100001", 
 
    detail_id: "2", 
 
    item_code: "SPH001", 
 
    price: "4000", 
 
    weight: "2" 
 
    }, 
 
    { 
 
    header_id: "TR100001", 
 
    detail_id: "3", 
 
    item_code: "SPH002", 
 
    price: "4500", 
 
    weight: "2" 
 
    }, 
 
    { 
 
    header_id: "TR100001", 
 
    detail_id: "4", 
 
    item_code: "SPH003", 
 
    price: "30000", 
 
    weight: "2" 
 
    }, 
 
    { 
 
    header_id: "TR100001", 
 
    detail_id: "5", 
 
    item_code: "SPH004", 
 
    price: "45000", 
 
    weight: "2" 
 
    } 
 
]; 
 

 
function getdHeaderid(header_id) { 
 
    // make ajax call... 
 
    // ... 
 
    // success callback (data) { 
 
    var tableHTML = []; 
 
    for (var i = 0; i < data.length; i++) { 
 
     var obj = data[i]; 
 
     var newRow = $(".clone-row").clone(true); 
 
     newRow.removeClass("clone-row"); 
 
     newRow.find(".header_id").val(obj.header_id); 
 
     newRow.find(".detail_id").val(obj.detail_id); 
 
     newRow.find(".item_code").val(obj.item_code); 
 
     newRow.find(".price").val(obj.price); 
 
     newRow.find(".weight").val(obj.weight); 
 
     tableHTML.push(newRow); 
 
    } 
 
    $("#dataTable2 tr:not(.clone-row)").remove(); 
 
    $("#dataTable2").append(tableHTML); 
 
    // } end success callback 
 
} 
 

 
getdHeaderid();

.clone-row { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="buy_transaction"> 
 
    <tbody id="dataTable2"> 
 
    <tr class="clone-row"> 
 
     <td><input type="checkbox" class="chk" name="chk[]" value="<?php echo $detail->detail_id; ?>"></td> 
 
     <td><input type="text" name="detail_id[]" class="detail_id form-control" value="<?php echo $detail->detail_id ;?>" size="1"> </td> 
 

 
     <td><input type="text" width="10" class="item_code form-control" id="item_code" name="item_code[]" value="<?php echo $detail->item_code; ?>"></td> 
 
     <td><input type="text" class="header_id1 form-control" id="header_id" name="header_id[]" value="<?php echo $detail->header_id; ?>" readonly></td> 
 
     <td><input type="text" class="price form-control" id="price" name="price[]" value="<?php echo $detail->price; ?>" readonly></td> 
 

 
     <td><input type="text" class="weight form-control" id="weight" name="weight[]" placeholder="0" value="<?php echo $detail->weight; ?>"></td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

你的表只有一个行内，您可以指定数据。另外，你应该用<tr></tr>标签包装你的表格数据标签，以表明这是表格中的一个不同的行。在迭代你的数据时，你应该为你的json中的每一组数据创建新的行。事情是这样的：

var table = document.getElementById("buy_transaction"); 

for(var i = 0; i<data.length; i++) { 
    var obj = data[i]; 
    var row = table.insertRow(i); 

    // Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element: 
    var cell1 = row.insertCell(0); 
    var cell2 = row.insertCell(1); 
    var cell3 = row.insertCell(1); 
    var cell4 = row.insertCell(1); 
    var cell5 = row.insertCell(1); 

    // Add some text to the new cells: 
    cell1.innerHTML(obj.header_id); 
    cell2.innerHTML(obj.detail_id); 
    cell3.innerHTML(obj.item_code); 
    cell4.innerHTML(obj.price); 
    cell5.innerHTML(obj.weight); 
}; 

这样你的for循环的每次迭代中，您要为您的表里，你要插入正确的价值观。