使用ajax jQuery for-each函数在表中追加多个数据

Posted 2023-03-11

【中文标题】使用ajax jQuery for-each函数在表中追加多个数据

【英文标题】：append the multiple data in table using ajax jQuery for-each function

【发布时间】：2021-10-26 12:52:22

【问题描述】：

我正在尝试使用 ajax jquery 将数据附加到表中。我知道带有单个数组的 append 函数。但我有两个单独的数组作为 $data1 和 $data2 如下 -

我想像示例表结构一样附加它，但我无法附加它。它只附加一个数组，正如我提到的 data1 OR data2 $.each(response.data1, function (i, item) 一样。以下是手动输入的，可能有些错别字请不要考虑。但我希望你明白我要显示什么类型的数据。

请帮助我，我如何附加两个数组。基本上，我想先追加产品和内部组件，再将产品和内部组件与数组中显示的数据一样多。

请帮忙

<table id="mytable>
  <thead>
    <tr>
      <td>SKU</td>
      <td>Product Name</td>
      <td>Component Name</td>
      <td>Part ID</td>
    <tr>
  </thead>
  <tbody class="mytable"></tbody>
</table>

$data1[] => ['product_name' => 'computer', 'product_sku' => '123456'];
$data2[] => ['component_name' => 'MotherBoard', 'part_id' => '654321'];

header("Content-type: Application/json");
echo json_encode(array('data1' => $data1, 'data2' => $data2));

$.ajax(
   type: "POST",
   success: function (response) 
      var table = $("table#mytable > tbody.mytable");
      $.each(response.data1, function (i, item) 
         table.append(`
            <tr>
              <td>$item.product_sku</td>
              <td>$item.product_name</td>
              <td></td>
              <td></td>
            </tr>

            <tr>
              <td></td>
              <td></td>
              <td>$item.component_name</td>
              <td>$item.part_id</td>
            </tr>
         `);
      
   
);

SKU    | Product Name  | Component Name | Part ID
------------------------------------------------
123456 | computer      |                | 
------------------------------------------------
       |               | MotherBoard    | 654321
------------------------------------------------

123456 | other_product |                | 
------------------------------------------------
       |               | other_com      | 0000
------------------------------------------------

【参考方案1】：

当您使用两个<tr> 组时，您可以使用两个$.each？

喜欢：

$.ajax(
   type: "POST",
   success: function (response) 
      var table = $("table#mytable > tbody.mytable");
      $.each(response.data1, function (i, item) 
         table.append(`
            <tr>
              <td>$item.product_sku</td>
              <td>$item.product_name</td>
              <td></td>
              <td></td>
            </tr>
         `);
      

      $.each(response.data2, function (i, item) 
         table.append(`
            <tr>
              <td></td>
              <td></td>
              <td>$item.component_name</td>
              <td>$item.part_id</td>
            </tr>
         `);
      
      
   
);

【讨论】：

我认为关闭标签是错误的

这段代码先打印 data1 然后再打印 data2 但我想打印 data1->firstProduct->components 和相同的循环重复

【参考方案2】：

您可以将数组合并到一个数组中并进行 json 编码。所以你只有一个 JSON 对象。

<?php
$data1 = ['product_name' => 'computer', 'product_sku' => '123456'];
$data2 = ['component_name' => 'MotherBoard', 'part_id' => '654321'];

$data3 = ['product_name' => 'other_product', 'product_sku' => '123456'];
$data4 = ['component_name' => 'other_com', 'part_id' => '0000'];

$merge[] = array_merge($data1, $data2);
$merge[] = array_merge($data3, $data4);
print_r($merge);
$json = json_encode($merge);
print_r($json);

然后像之前那样遍历对象。 此代码不可运行，您必须在您的 Lamp 服务器上对其进行测试，因为 *** 不支持要执行的 php 脚本。

【讨论】：

没有帮助