如何使用Jquery水平打印表中的数组元素，并在某个元素之后垂直打印

How to print array elements in table horizontally and after some element vertically using Jquery?

本文关键字：打印 之后 元素 垂直 数组元素 Jquery 何使用 水平      更新时间：2023-09-26

我有一个带数字的数组。如果我按行打印表中的数组，它会水平打印所有元素，但我想水平打印像3个元素一样的数组，然后在下一行水平打印3个元素，我的Jquery是：

$.get("",{id:$(this).val()}, function(data){
  for (var i = 0; i < data.length; i++) {
    drawRow(data[i]);
  }
  function drawRow(rowData) {
    var row = $("<th />")
    row.empty();
    $("#delDish").append(row);
    row.append($("<button class='btn btn-lg btn-success' value='"+ rowData.item_id +"'>" + rowData.item_name + "</button>"));                
  } });

我需要的是aaray应该像一样打印

<table>
<tr>
 <td></td>
 <td></td>
 <td></td>
</tr>
<tr>
 <td></td>
 <td></td>
 <td></td>
</tr>
<tr>
 <td></td>
 <td></td>
 <td></td>
</tr>
</table>

如何使用Jquery？

查看此JSBin：http://jsbin.com/wayotejatu/edit?html，js，输出

首先，用一些伪数据填充data数组：

var data = [
    { item_id: 1, item_name: 'a' },
    { item_id: 2, item_name: 'b' },
    { item_id: 3, item_name: 'c' },
    { item_id: 4, item_name: 'd' },
    { item_id: 5, item_name: 'e' },
    { item_id: 6, item_name: 'f' },
    { item_id: 7, item_name: 'g' }
];

然后，在数据中循环，只有当行索引是三的乘积时，才创建新行：

if (i % 3 === 0) {
    row = $('<tr />');
    $("#delDish tbody").append(row);
}

然后，在drawRow函数中，总是附加到最后一行$("#delDish tbody tr:last-child")

请注意，HTML结构与问题中的原始结构有点不同：

<table id="delDish">
    <tbody></tbody>
</table>
相关文章：