在表格单元格内循环对象并创建无序列表答案

【问题标题】：Looping object inside a table cell and create a unordered list在表格单元格内循环对象并创建无序列表
【发布时间】：2016-06-07 06:02:51
【问题描述】：

我有这张表，其中有一列，其中单元格可能包含也可能不包含值，但当它包含值时，它是 JSON 格式；否则将为空（null）。

<table>

<tbody>
<tr>
  <td>Barley</td>
  <td>AK, AZ</td>
  <td class="fpdCell">[{"date":"06/01/2016","error":"Double/Triple cropping","id":2},{"date":"06/07/2016","error":"Lack of Planting Dates Established","id":2}]</td>
  <td>null</td>
</tr>
<tr>
  <td>Barley</td>
  <td>AK, AZ, AR</td>
  <td class="fpdCell">[{"date":"06/04/2016","error":"No Error Found","id":3},{"date":"06/27/2016","error":"Lack of Planting Dates Established","id":3},{"date":"06/28/2016","error":"Weather Patterns","id":3}]</td>
  <td>null</td>
</tr>
<tr>
  <td>Burley Tobacco</td>
  <td>null</td>
  <td class="fpdCell">null</td>
  <td>null</td>
</tr>
<tr>
  <td>Fire Cured Tobbacco</td>
  <td>null</td>
  <td class="fpdCell">null</td>
  <td>null</td>
</tr>
<tr>
  <td>Flue Cured Tobacco</td>
  <td>null</td>
  <td class="fpdCell">null</td>
  <td>null</td>
</tr>
<tr>
  <td>Oats</td>
  <td>null</td>
  <td class="fpdCell">null</td>
  <td>null</td>
</tr>

我需要做的是使用fpdCell 类遍历每个单元格，在每个单元格内循环对象，创建一个列表并将它们添加为列表元素。

这是我所能得到的。我真的不知道如何从这里继续前进。

var theCells = $('.fpdCell');
$.each(theCells, function(index, value) {

var cellValues = $.parseJSON(value.textContent);

if (cellValues != 'null') {
   console.log(cellValues);
   value.textContent = '';
   $(value).append('<ul class="list-group ul'+index+'"></ul>')

  //then add <li class="list-group-item">Test</li>

 //Not working------------------
 /*
   for (var u = 0; u < cellValues. length; u++) {
  $('ul' + index).append('<li class="list-group-item">'+cellValues[u].date+'</li>');
  console.log(cellValues[u].date);
}

 */
   }
 });

提前致谢。

【问题讨论】：

标签： javascript jquery html arrays

【解决方案1】：

要实现这一点，您只需要两个循环，一个遍历 .fpdCell 元素，另一个遍历解析的 JSON 并构建 ul 的 HTML。试试这个：

$('.fpdCell').each(function() {
    var $el = $(this), html = '';
    $.each(JSON.parse($el.text()), function(i, obj) {
        html += '<li class="list-group-item">' + obj.date + '</li>';
    })
    $el.append('<ul>' + html + '</ul>');
});

Working example

【讨论】：

谢谢。这是一个艰难的决定，提供的所有答案都以一种或另一种方式起作用。我添加到您的答案中的唯一内容是在插入列表元素之前将 $el.text('') 清空到单元格。

【解决方案2】：

var theCells = $('.fpdCell');
$.each(theCells, function() {

   var cellValues = $.parseJSON($(this).text());

   if (cellValues != 'null') {
      console.log(cellValues);
      $(this).html("");

      var list = '<ul class="list-group ul'+index+'">';

      for (var u = 0; u < cellValues.length; u++) {
          list+='<li class="list-group-item">'+cellValues[u].date+'</li>';
          console.log(cellValues[u].date);
      }

   if(cellValues.length>0)
      list+="</ul>";

    $(this).append(list);
}

【讨论】：

【解决方案3】：

fpdcell 列中的对象是您可能在逻辑中遗漏的数组对象。

还有一件事，可能是错字，但是，您错过了注释代码中的 . 以将列表项附加到 ul :)

这是一个循环遍历数组，然后遍历每个数组元素中的各个元素以创建线性列表的解决方案。

var theCells = $('.fpdCell');
$.each(theCells, function(index, value) {
  var cellValues = JSON.parse(value.textContent);
  if (cellValues != 'null') {
    $(value).html('<ul class="list-group ul'+index+'"></ul>');
    $.each(cellValues, function(cellValueIndex, cellValue){
        for (var prop in cellValue) {
        $('.ul'+index).append('<li class="list-group-item">'+ cellValue[prop] +'</li>');
      }
    });
  } else {
    $(value).html('');
  }
});

这可能不是您正在寻找的确切解决方案，但应该可以帮助您沿着您想要的方向前进。编码愉快。

这里有一个解决方案JSFiddle

【讨论】：