Question

这张照片定义了我需要的东西

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

以下是我尝试过的代码。我可以更好地解决这个问题吗？

＆＃13;

 <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>

＆＃13;

<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>

＆＃13;

Answer 1

您需要先使用换行符（\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;


    }

我已经使用过bootstrap for css，你可能想要自己使用（或不使用）。

参考jsFiddle here。

将textarea中的CSV输入转换为动态表

1 个答案: