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

Question

如果给你以下输入：

8，黑色，雷克萨斯
9，绿色，奔驰
10，布朗，凯迪拉克
11，灰色，保时捷

什么是正确的步骤得到的输出形成一个表，其中的标题是：ID，颜色，租车

Answer 1

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

您必须在ARR获取数据AY和替代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]); 

Answer 2

您创建一个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);

Answer 3

试试这个，

<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