嵌套数据 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

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

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>

Answer 2

使用变量来存储列表项将它们附加到您的 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>