时间戳

首页 > 解决方案 > 表格行上的字符串

javascript - 表格行上的字符串

问题描述

我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);

任何提示或指示都会很好！

标签： javascriptjqueryhtml

解决方案

如果您希望每个项目位于单独的单元格中，那么您需要拆分字符串，获取数组，循环遍历它并为每个项目创建一个。现在您只是创建一个单元格并将所有项目放入其中。另外，“拆分”基本上是没有效果的，因为虽然拆分的结果是一个数组，但是如果你直接把一个数组放到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>

推荐阅读