如何使用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