我有使用javascript搜索和向表格显示数据的问题。我有格式json的数据，但它只能在第一行的表上显示，而在控制台log.data上显示五行。如何解决这个问题。非常感谢你们，我希望在这里解决了这个问题。
这是数据：
<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">☑</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>
这个观点：
<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>
这个Javascript代码：
HashMap答案 0 :(得分：0)
您的问题措辞很难理解，但我最好猜测您正在寻找什么 - 您需要从数据中为每个元素添加一个表行。如果是这样，你可以这样做。
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>
答案 1 :(得分：0)
您的表只有一行，您可以在其中分配数据。此外，您应该使用<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循环的每次迭代，你正在为你的表创建一个新行，并且你正在插入正确的值。