gpt4 book ai didi

javascript - 将文本区域中的 CSV 输入转换为动态表

转载 作者:行者123 更新时间:2023-11-29 21:03:44 25 4
gpt4 key购买 nike

这张图定义了我需要的

This picture defines what I need

我希望将我动态输入的数据转换为表格,每个逗号定义列,换行符定义新行。

下面是我试过的代码。我可以有更好的方法来解决这个问题吗?

 <script>
function myFunction()
{
var x = document.getElementById("textarea").value.split(" ");
var customers = new Array();
customers.push(x[0]);
customers.push(x[1]);
customers.push(x[2]);


var table = document.createElement("TABLE");
table.border = "1";

//Get the count of columns.
var columnCount = customers[0].length;

//Add the header row.
var row = table.insertRow(-1);
for (var i = 0; i < columnCount; i++) {
var headerCell = document.createElement("TH");
headerCell.innerHTML = customers[0][i];
row.appendChild(headerCell);
}

//Add the data rows.
for (var i = 1; i < customers.length; i++) {
row = table.insertRow(-1);
for (var j = 0; j < columnCount; j++) {
var cell = row.insertCell(-1);
cell.innerHTML = customers[i][j];
}
}

var dvTable = document.getElementById("dvTable");
dvTable.innerHTML = "";
dvTable.appendChild(table);

}
</script>
<html>
<head>
<title>Player Details</title>

</head>
<body align = "center">
<h3 align = "center"><b>Input CSV</b></h3>


<p align = "center"><textarea rows="10" cols="50" name = "csv" id = "textarea"></textarea></p><br>

<button type="button" id = "convert" onclick="myFunction()">Convert</button><br>
<br>


<div id = "team"></div>

</body>
</html>

最佳答案

您需要先使用换行符 (\n) 拆分数据,然后使用逗号 (,) 字符。该表可以创建为字符串,并最终插入到正确的 div 中。

引用下面的代码开始。

function myFunction() {
var tbl = "<table class='table table-responsive table-bordered table-striped'><tbody>"
var lines = document.getElementById("textarea").value.split("\n");
for (var i = 0; i < lines.length; i++) {
tbl = tbl + "<tr>"
var items = lines[i].split(",");
for (var j = 0; j < items.length; j++) {
tbl = tbl + "<td>" + items[j] + "</td>";
}
tbl = tbl + "</tr>";
}
tbl = tbl + "</tbody></table>";
var divTable = document.getElementById('team');
console.log(tbl);
divTable.innerHTML = tbl;


}

我已经为 css 使用了 bootstrap,你可能想使用你自己的(或不使用)。

引用jsFiddle here .

关于javascript - 将文本区域中的 CSV 输入转换为动态表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45209280/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com