Javascript 如何在HTML表中生成多个列?
这是我到目前为止的代码,它从CSV中提取数据。它只创建一个列,但我希望数据最多可以填充到4个列中,并根据需要包含尽可能多的行。我该怎么做? --需要注意的是,数据最初是在电子表格中的两列中,即Name data,目标是使每个单元格都是Name:dataJavascript 如何在HTML表中生成多个列?,javascript,jquery,html,Javascript,Jquery,Html,这是我到目前为止的代码,它从CSV中提取数据。它只创建一个列,但我希望数据最多可以填充到4个列中,并根据需要包含尽可能多的行。我该怎么做? --需要注意的是,数据最初是在电子表格中的两列中,即Name data,目标是使每个单元格都是Name:data var test_data = data.split(/\r?\n|\r/); var table_data = '<table>'; var count = 0; for (var i = 0; i < test_data.
var test_data = data.split(/\r?\n|\r/);
var table_data = '<table>';
var count = 0;
for (var i = 0; i < test_data.length; i++) {
var cell_data = test_data[i].split(",");
table_data += '<tr>';
for (var j = 0; j < cell_data.length - 1; j++) {
if(i === 0) {
table_data += '<th colspan="4">' + cell_data[j] + ":" + cell_data[j + 1] + '</th>';
} else {
table_data += '<td>' + cell_data[j] + ":" + cell_data[j + 1] + '</td>';
}
}
alert(count);
if (count == 3) {
table_data += '</tr>';
count = 0;
} else {
count += 1;
}
//table_data += '</tr>'
}
table_data += '</table>';
$('#loadData').html(table_data);
var test_data=data.split(/\r?\n | \r/);
var表_数据=“”;
var计数=0;
对于(变量i=0;i
形成一个适当的表结构,如下例所述。而且我相信你应该得到一个多维数组作为你的数据。在你的循环中,你只寻找一维数据。请通过console.log打印您的数据,以了解您是如何获取数据以进一步处理逻辑的
<table>
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings2</th>
<th>Savings3</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
<td>$100</td>
<td>$100</td>
</tr>
</table>
月
储蓄
储蓄2
储蓄3
一月
$100
$100
$100
这是我最终使用的解决方案。我使用了一个计数器来确定只有在行中有四条数据时才打开和关闭行的列数
var test_data = data.split(/\r?\n|\r/);
var table_data = '<table>';
var count = 0;
for (var i = 0; i < test_data.length; i++) {
var cell_data = test_data[i].split(",");
if (count == 0) {
table_data += '<tr>';
}
for (var j = 0; j < cell_data.length - 1; j++) {
if(i === 0) {
table_data += '<th>' + cell_data[j] + ":" + cell_data[j + 1] + '</th>';
} else {
table_data += '<td>' + cell_data[j] + ":" + cell_data[j + 1] + '</td>';
}
}
if (count == 3) {
table_data += '</tr>';
count = 0;
} else {
count += 1;
}
//table_data += '</tr>'
}
table_data += '</table>';
$('#loadData').html(table_data);
var test_data=data.split(/\r?\n | \r/);
var表_数据=“”;
var计数=0;
对于(变量i=0;i
为什么j |
而不是j |
?它填充了未定义的值。而不是询问“我该如何做”来解释所示代码的问题。它在干什么?与预期有什么不同?有错误吗?(等)花几分钟时间通读您可以去掉count
变量,改用。对于粗略的、稍微优化的示例:在旁注上,这看起来更适合列表。它本身不是表格数据。如果你把你的html作为一个列表,那么你有更多的灵活性来根据不同的屏幕宽度设计样式,并使用CSS媒体查询等。谢谢你!我有点想用模,但走了一条更直接的路线。