表格行上的字符串

Question

我正在名为each的变量上运行data函数，这是一个成功的AJAX调用的响应，它是json数据类型。

以下是数据在响应中的外观：

Object { id: "88", toDo: "test 4", instructions: " ;TECH;Dippin;Try try try;Hej SSimon!;", … }

我想将其添加到表中。

但是它只会将所有字符串放在一行中，我希望它们可以正确地显示在表中。

var html = '';    

$.each(data, function() {
    var re = 
    html = html + "<tr><td>" + this['instructions'].split(/[\s,;,<]+/) + "</td></tr>";
});

$("#todoInstructions").html(html);

任何技巧或指针都很好！

Answer 1

如果要将每个项目放在单独的单元格中，则需要拆分字符串，获取数组，循环遍历并为每个项目创建一个。现在，您只是创建一个单元并将所有项目放入其中。此外，“拆分”基本上没有效果，因为尽管拆分的结果是一个数组，但是如果将数组直接放入HTML中，JS会尝试将其转换为字符串，这通常只涉及列出所有数组一项接一项-因此您将返回原始字符串。

此代码实际上将拆分数组中的每个项目放入其自己的表单元格中。它还会删除空白项目，并且不会为其创建单元格。

var data = [{
  id: "88",
  toDo: "test 4",
  instructions: " ;TECH;Dippin;Try try try;Hej SSimon!;"
}];

var html = '';

$.each(data, function() {
  html += "<tr>";
  var items = this.instructions.split(/[\s,;,<]+/);
  console.log(items);
  
  for (item in items) {
    if (items[item] != "")
      html += "<td>" + items[item] + "</td>";
  }
  html += "</tr>";
});

$("#todoInstructions").html(html);

table {
  border-collapse: collapse;
}

td,
th {
  border: solid 1px #cccccc;
  padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="todoInstructions"></table>