如何使用 Javascript 使用给定的输入创建输出表？答案

【问题标题】：How to create output table using given input using Javascript?如何使用 Javascript 使用给定的输入创建输出表？
【发布时间】：2015-03-31 11:55:57
【问题描述】：

如果您收到以下输入：

8、黑色、雷克萨斯
9，格林，梅赛德斯
10、布朗、凯迪拉克
11、格雷、保时捷

将输出形成一个表的正确程序是什么，其中的标题是：id、Color、Car

【问题讨论】：

输入是如何给出的？
@NoDownvotesPlz 如上例所示

标签： javascript input output tabular

【解决方案1】：

您创建一个table 元素并开始附加header 元素并在下面的正文行之后。

//create Table
var table = document.createElement('table');

//create Table Header
var header = ['Id', 'Color', 'Car' ];
var tr=document.createElement('tr');
for(var column in header)
{   
  var th=document.createElement('th');
  th.innerHTML = header[column];
  tr.appendChild(th)
}
table.appendChild(tr);

//create Table Body
var input = [
  [8, 'Black', 'Lexus'],
  [9, 'Green', 'Mercedes'], 
  [10, 'Brown', 'Cadillac'],
  [11, 'Gray', 'Porsche']
];

for(var row in input)
{
    var tr=document.createElement('tr');
    for(var column in input[row]){
      
        var td=document.createElement('td');
        td.innerHTML = input[row][column];
        tr.appendChild(td)
        
    }
    table.appendChild(tr);
}

// append Table
document.body.appendChild(table);

【讨论】：

【解决方案2】：

试试这个，

<table>
        <tr>
            <td>ID:</td>
            <td><input type="text" id="carid"></td>
        </tr>
        <tr>
            <td>Color:</td>
            <td><input type="text" id="color">
                </tr>
                <tr>
                    <td> Car </td>
                <td><input type="text" id="car">
            <input type="button" id="add" value="Add" onclick="adddata()"></td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </table>

JS：

function adddata() { 

    var cid = document.getElementById("carid");
    var ccolor = document.getElementById("color");
    var ccar = document.getElementById("car");

    var table = document.getElementById("dymanictable");

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);


    row.insertCell(0).innerHTML= cid.value;
    row.insertCell(1).innerHTML= ccolor.value;
    row.insertCell(2).innerHTML= ccar.value;

}

Working Demo

【讨论】：

【解决方案3】：

查看http://fiddle.jshell.net/5or3sLg5/2/

您必须在数组中获取数据并替换 for 循环限制：

for (var i = 1; i < 4; i++){

必须是这样的：

for (var i = 1; i < data.lenght; i++){

以及从哪里获取数据

var text1 = document.createTextNode('8');
var text2 = document.createTextNode('Black ');
var text3 = document.createTextNode('Lexus');

一定是这样的

var text1 = document.createTextNode(data[i,1]);
var text2 = document.createTextNode(data[i,2]);
var text3 = document.createTextNode(data[i,3]);

【讨论】：