在带有标题的单元格中添加溢出表格单元格

我似乎无法理解如何使用溢出的单元格接近表格并将数据添加到另一个单元格中的那些单元格中。 我知道我的解释有点模糊，但检查图像。

最终输出应如下所示：

目前我正在研究一个名为jquery-csv的jQuery库，并使用csv.toArrays()方法，它给出了一个数组作为输出。 从我的JSFiddle我坚持添加值我join()到适当的地方。 所以在循环中我正在检查它是否是数组的第4个元素，那么之后的其余数据应该连接成一个字符串并添加到前一个单元格中。 我的问题是我应该如何添加我在之前的单元格中创建的连接字符串？ 非常感谢帮助。

 function generateTable(data) { var html; var overflow; for(var row in data) { html += '\r\n'; var myStr = []; var almost; for(var item in data[row]) { //html += '' + data[row][item] + '\r\n'; if(data[row].indexOf(data[row][item]) < 4){ html += '' + data[row][item] + '\r\n'; }else{ myStr.push(data[row][item]); console.log(myStr); almost = myStr.join(":"); console.log(almost); } } console.log("this : " + almost); //items all joined html += '\r\n'; } return html; } 

Answer 1

您可以尝试以下逻辑，您可以为最后一列创建单独的文本并附加它。

 var input = $('#here').val(); var data = $.csv.toArrays(input); function generateTable(data) { var html; var overflow; for(var row in data) { html += '\r\n'; var myStr = []; var almost; var lastCol = ""; var count=0; for(var item in data[row]) { //html += '' + data[row][item] + '\r\n'; if(count < 3){ html += '' + data[row][item] + '\r\n'; }else{ if(count>=4) { lastCol += ":"; } lastCol += data[row][item]; } count++; } lastCol += ""; console.log("this : " + almost); //items all joined html += lastCol + '\r\n'; } return html; } $("#result").html(generateTable(data)); console.log(data); 

JSFiddle演示

Answer 2

很高兴有人回答你。 我只是为了练习而开发我之前回答 你之前的问题 ，好吗？

所以，关于最后一个答案的重要事项是打印格式，所以我们需要做的就是调整它。 例如，如果你想要一个带有标题的行，你应该循环并打印它。 像这样：

  // just adding a loop to headers: html += '\r\n'; for(var item in header) { html += '' + header[item] + '\r\n'; } html += '\r\n'; 

而已。 所有标头值将作为特定表行上的表格单元格重新加载。

第二步是从其他单元格中删除标题信息：

  for(var row in rows) { html += '\r\n'; for(var item in rows[row]) { html += '' + rows[row][item].join(agregator) + '\r\n'; } html += '\r\n'; } 

最后的代码，最后

  var separator = ",", agregator = ":"; function generateTable(lines) { if (typeof(lines) === 'undefined' || lines.length == 0) { return ''; } var header = lines[0].split(separator); var html = ''; var rows = []; // mapping for (var row in lines) { if(row == 0) { continue; } var cols = lines[row].split(separator), values = {}; for (var col in cols) { var item = header[col] ? header[col] : header[header.length-1]; if(values[item]) { values[item].push(cols[col]); } else { values[item] = [cols[col]]; } } rows.push(values); } // printing // just adding a loop to headers: html += '\r\n'; for(var item in header) { html += '' + header[item] + '\r\n'; } html += '\r\n'; for(var row in rows) { html += '\r\n'; for(var item in rows[row]) { html += '' + rows[row][item].join(agregator) + '\r\n'; } html += '\r\n'; } return html; } $.ajax({ type: "GET", url: "test.csv", dataType: "text", success: function(response) { $('#result').html(generateTable($.csv.parsers.splitLines(response))); } }); 

我带你的JSFiddle在这里测试： http ： //jsfiddle.net/xpvt214o/693555/只是更改$ .ajax部分。 我认为它适用于任何CSV文件。