Question

我有这个表有一个列，其中单元格可能包含也可能不包含值，但是当它有，它是一个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);
}

 */
   }
 });

提前致谢。

Answer 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

Answer 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);
}

Answer 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

的小提琴

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

3 个答案: