Question

我知道我应该对代码有所了解，所以我可以在这里发布我的努力，但我已经尝试了几次这样做，我的代码很乱。道歉。

我有一个制表符分隔的字符串，我想将其转换为包含3列的HTML表格。所以如果字符串有6个值，那么我希望这是2行。例如：

aa | bb | cc | dd | ee | ff

会变成

aa | bb | cc
dd | ee | ff

有没有办法用JavaScript或jQuery做到这一点？

感谢您的帮助。

Answer 1

希望这会有所帮助。您可以在下面的代码中找到评论。

$(document).ready(function () {
	var strColumn = "aa | bb | cc | dd | ee | ff";

	var table = $("<table/>"); //Create new table element
	$.each(strColumn.split("|"), function (i, val){
		if (i == 0 || i % 3 == 0) row = $("<tr/>"); //Create new row after every 3 columns
		row.append($("<td>" + val.trim() + "</td>")); //Create table column and append to row
		table.append (row); //Append row to table
	});
	$("body").append(table); //Append table to body element
});

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

Answer 2

您可以使用一些简单的逻辑来实现jQuery，如下所示。

＆＃13;

var input = "aa | bb | cc | dd | ee | ff | aaa | fsf";

//Frmat the input
input = input.split("|").map(function(text) {
  return text.trim();
});


var MAX_COL_COUNT = 3,
  table = $("#table"),
  cellCounter = 0,
  rowCounter = 0;

//Add into a table with tr and td
input.forEach(function(text) {
  if (cellCounter == MAX_COL_COUNT || cellCounter == 0) {
    table.append("<tr></tr>");
    rowCounter++;
    cellCounter = 0;
  }

  table.find("tr").eq(rowCounter - 1).append("<td>" + text + "</td>");
  cellCounter++;
});

＆＃13;

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

＆＃13;

Answer 3

首先，您需要使用split（）从字符串中创建数组; 用这个：

var str = "aa | bb | cc | dd | ee | ff";
var array = str.split("|");

这将给你一个这样的数组：

[aa,bb,cc,dd,ee,ff]

接下来，我们将每3个项目拆分此数组以生成一个二维数组。

var str = "aa | bb | cc | dd | ee | ff";
var array = str.split("|");

var 2dArray = [];
var  count = 0;
var arr = [];
for(var i in array){
    arr.push(array[i]);
    count++;
    if(count > 2){
       2dArray.push(arr);
       arr = [];
       count = 0;
    }
}

现在我们有了一个二维数组。您可以轻松地将其解析为表格。例如，请查看：Generate HTML table from 2D JavaScript array

注意：我已经想到了这个。所以也许它需要一些微调，但它会给你一个想法。

JavaScript / jQuery从分隔列表创建HTML

3 个答案: