嵌套数据jQuery表

Question

抱歉，我的英语不好，因为我使用谷歌翻译。  我在展示时将数据加倍，下面我包含示例代码：

var ray = [
            {
              id: "63",
              name: "katak",
              price: "12000",
              list_pack: ["kol1-1", "kol1-2", "kol1-3"]
            },
            {
              id: "61",
              name: "kodok",
              price: "15000",
              list_pack: ["kol2-1", "kol2-2", "kol2-3", "kol2-4", "kol2-5"]
            }
          ]

if ($('table#table').length > 0) {
	$.each(ray, function(index, element){
  	$('table#table').append(
    	'<tr>'+
      	'<td>'+element.id+'</td>'+
        '<td>'+element.name+'</td>'+
        '<td>'+element.price+'</td>'+
      '</tr>'+
      '<tr>'+
      	'<td colspan="4">'+
        	'<ul id="list">'+
          '</ul>'+
        '</td>'+
      '</tr>'
    )
    
    get_list(element.list_pack)
  })
}

function get_list(qty){
	if ($('ul#list').length > 0) {
  	$.each(qty, function(index,element){
    	$('ul#list').append(
      	'<li>'+element+'</li>'
      );
    })
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" id="table">
  <thead>
    <tr>
      <th>Id</th>
      <th>Name</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr id="list_pack">
    </tr>
  </tbody>
</table>

如何订购表格中显示的数据，因为它不会像这样加倍？请帮忙。

https://jsfiddle.net/martin776019/4j371spk/5/

Answer 1

使用变量存储您的列表项会将它们附加到您的html，现在$('ul#list').append()会附加到这两个列表，因为您没有指定要附加到哪个列表

var ray = [
            {
              id: "63",
              name: "katak",
              price: "12000",
              list_pack: ["kol1-1", "kol1-2", "kol1-3"]
            },
            {
              id: "61",
              name: "kodok",
              price: "15000",
              list_pack: ["kol2-1", "kol2-2", "kol2-3", "kol2-4", "kol2-5"]
            }
          ]

if ($('table#table').length > 0) {

	$.each(ray, function(index, element){
      var  list = get_list(element.list_pack);
     
  	$('table#table').append(
    	'<tr>'+
      	'<td>'+element.id+'</td>'+
        '<td>'+element.name+'</td>'+
        '<td>'+element.price+'</td>'+
      '</tr>'+
      '<tr>'+
      	'<td colspan="4">'+
        	'<ul id="list">'+ list +
          '</ul>'+
        '</td>'+
      '</tr>'
    )
    
   
  })
}

function get_list(qty){
   list = '';
  	$.each(qty, function(index,el){
      	list+='<li>'+el+'</li>';
    });
    return list;
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" id="table">
  <thead>
    <tr>
      <th>Id</th>
      <th>Name</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr id="list_pack">
    </tr>
  </tbody>
</table>

Answer 2

您使用的list ID必须是唯一的（重复列表项原因是它会在第一次出现#list时附加所有列表项），因此请使用class而不是id并在ul函数中传递get_list，例如

var ray = [{
    id: "63",
    name: "katak",
    price: "12000",
    list_pack: ["kol1-1", "kol1-2", "kol1-3"]
  },
  {
    id: "61",
    name: "kodok",
    price: "15000",
    list_pack: ["kol2-1", "kol2-2", "kol2-3", "kol2-4", "kol2-5"]
  }
]

if ($('table#table').length > 0) {
  $.each(ray, function(index, element) {
    tr = $('<tr>' +
      '<td>' + element.id + '</td>' +
      '<td>' + element.name + '</td>' +
      '<td>' + element.price + '</td>' +
      '</tr>' +
      '<tr>' +
      '<td colspan="4">' +
      '<ul class="list">' +
      '</ul>' +
      '</td>' +
      '</tr>').appendTo($('table#table')); // using appendTo to get latest row ul
    get_list(element.list_pack, tr.find('ul.list'));
  })
}

function get_list(qty, elem) {
  if (elem.length > 0) {
    $.each(qty, function(index, element) {
      elem.append(
        '<li>' + element + '</li>'
      );
    })
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" id="table">
  <thead>
    <tr>
      <th>Id</th>
      <th>Name</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr id="list_pack">
    </tr>
  </tbody>
</table>