追加 tr 但如果已经添加在 tr 中则不追加答案

【问题标题】：Append tr but don't append if already added in tr追加 tr 但如果已经添加在 tr 中则不追加
【发布时间】：2017-01-02 00:27:29
【问题描述】：

var data = [{
  "org_name": "General",
  "suborg_name": "General1"
}, {
  "org_name": "General",
  "suborg_name": "General2"
}, {
  "org_name": "General",
  "suborg_name": "General3"
}, {
  "org_name": "Fund",
  "suborg_name": "Fund1"
}, {
  "org_name": "Fund",
  "suborg_name": "Fund2"
}, {
  "org_name": "Fund",
  "suborg_name": "Fund3"
}]


var tr;
$.each(data, function(i, v) {
  tr = $('<tr class="org_name"/>');
  tr.append("<td id=''>" + v.org_name + "</td>");
  tr.append("<td id=''>" + v.suborg_name + "</td>");

  $("table").append(tr);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
</table>

我想要的输出是：

General General1
        General2
        General3
Fund    Fund1
        Fund2
        Fund3

这怎么可能？

【问题讨论】：

最好有var data = [{ "org_name": "General", "suborg_name": ["General1","General2","General3"] }, { "org_name": "Fund", "suborg_name": ["Fund1","Fund2","Fund3"] }];之类的数据
@RohanKumar 我认为这也是我的好主意，如果我不能创建这种格式的 json，我会研究它。我正在做我自己的 json 格式。

标签： jquery append html-table

【解决方案1】：

您可以简单地为自己构建一个循环检查。也许与另一个数组/对象进行比较。

var data = [{
  "org_name": "General",
  "suborg_name": "General1"
}, {
  "org_name": "General",
  "suborg_name": "General2"
}, {
  "org_name": "General",
  "suborg_name": "General3"
}, {
  "org_name": "Fund",
  "suborg_name": "Fund1"
}, {
  "org_name": "Fund",
  "suborg_name": "Fund2"
}, {
  "org_name": "Fund",
  "suborg_name": "Fund3"
}];

var added = [];

$.each(data, function(i, v) {
  var name = "&nbsp;";

  if( added.indexOf(v.org_name) == -1 ) {
      name = v.org_name;
      added.push(v.org_name);
  }
  
  var tr = $('<tr class="org_name"/>');
  tr.append("<td id=''>" + name + "</td>");
  tr.append("<td id=''>" + v.suborg_name + "</td>");

  $("table").append(tr);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
</table>

【讨论】：

简单易懂。给我4分钟接受:)
但如果 org_name 不是有序的，这将失败。比如，General1，General2，Fund1，General3 ...然后输出将是General General1 General2 Fund Fund1 Fund2 General3 Fund3
@BhushanKawadkar 我没想到让我检查一下
@BhushanKawadkar 我认为这不会发生，因为格式已经修复
@BrownmanRevival，那么在这种情况下，这是完美的解决方案。干杯！！

【解决方案2】：

在这里查看jsfiddle

var tr;
var orgName=' ';
$.each(data, function(i, v) {
    if(orgName!=v.org_name){
  tr = $('<tr class="org_name"/>');
    tr.append("<td id=''>" + v.org_name + "</td>");
    tr.append("<td id=''>" + v.suborg_name + "</td>");
}else{
  tr = $('<tr class="org_name"/>');
    tr.append("<td id=''> </td>");
    tr.append("<td id=''>" + v.suborg_name + "</td>");
}
orgName = v.org_name;
  $("table").append(tr);
})

【讨论】：

【解决方案3】：

查找具有组织名称的现有 tr 是否存在。如果存在，则将空字符串放入第一个 td 并附加到相同的 org tr 之后。如果没有，则在第一个 td 中添加组织名称并附加到表中。

var data = [{
      "org_name": "General",
      "suborg_name": "General1"
    }, {
      "org_name": "General",
      "suborg_name": "General2"
    }, {
      "org_name": "General",
      "suborg_name": "General3"
    }, {
      "org_name": "Fund",
      "suborg_name": "Fund1"
    }, {
      "org_name": "Fund",
      "suborg_name": "Fund2"
    }, {
      "org_name": "Fund",
      "suborg_name": "Fund3"
    }]


    var tr;

    $.each(data, function(i, v) {
      
      var rowExist = $('table').find('tr.' + v.org_name).length;
      tr = $('<tr class="org_name ' + v.org_name + '"/>');
      var orgName = '';
      if (rowExist == 0)
      {
        orgName = v.org_name;
        $('table').append(tr);
      }
      else 
      {
        $('table').find('tr.' + v.org_name).last().after(tr);
      }
      tr.append("<td id=''>" + orgName  + "</td>");
      tr.append("<td id=''>" + v.suborg_name + "</td>");  
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
</table>

【讨论】：