如何HTML表格转换为Javascript

因此，作为一个初学者，我不知道如何使用JavaScript创建一个表。我可以使用简单的html文件制作表格，但不能使用Javascript。如何HTML表格转换为Javascript

输出应该有2列和4行。我还需要使用提示标记才能为第二列插入数据。更不用说我需要在第二栏中平均总数。

我试图寻找，但我得到了不同的结果及其混乱me.so请帮我

这是HTML文件

<html> 
    <body> 

    <table border="1" style="width:30%"> 
     <tr> 
      <td>Rose</td> 

      <td>40</td> 
     </tr> 
     <tr> 
      <td>Daisy</td> 

      <td>50</td> 
     </tr> 
     <tr> 
      <td>Orchids</td> 

      <td>60</td> 
     </tr> 
     <tr> 
      <td>Flowers</td> 
      <td>150</td> 
     </tr> 
    </table> 

    </body> 
</html>

来源

2014-09-30 city lights

你可以参考http://stackoverflow.com/questions/13775519/html-draw-table-using-innerhtml OR http://stackoverflow.com/questions/14643617/create -table-使用JavaScript的 – DimoMohit 2014-09-30 05:52:46

-1

你只需要与数据阵列，然后填写表格的认为这是一个HTML文档

var table = '<table border="1">', 
    data = [['Rose','Daisy','Orchids','Flowers'],[40,50,60,150]]; 

for (var i = 0; i < data[0].length; i++) { 
    table += '<tr>'; 
    for (var j = 0; j < data.length; j++) { 
     table += '<td>' + data[j][i] + '</td>'; 
    } 
    table += '</tr>'; 
} 
table += '</table>'; 
document.getElementById('container').innerHTML = table;

http://jsfiddle.net/5pdac6sb/

来源

2014-09-30 05:50:26 monkeyinsight

试试这个 - >

var Rose = prompt("Enter price for Rose?"); 
 
var Daisy = prompt("Enter price for Daisy?"); 
 
var Orchids = prompt("Enter price for Orchids?"); 
 

 
var flowers = Number(Rose) + Number(Daisy) + Number(Orchids); 
 

 
var table = document.createElement("table"); 
 

 
createTable(); 
 

 
function createTable(){ 
 
    createTrTds("Rose",Rose); 
 
    createTrTds("Daisy",Daisy); 
 
    createTrTds("Orchids",Orchids); 
 
    createTrTds("Total",flowers); 
 
    document.getElementById("table").appendChild(table); 
 
} 
 

 

 
function createTrTds(text,value){ 
 
    var tr = document.createElement("tr"); 
 
    
 
    var td1 = document.createElement("td"); 
 
    var td2 = document.createElement("td"); 
 
    
 
    var txt1 = document.createTextNode(text); 
 
    var txt2 = document.createTextNode(value); 
 
    
 
    td1.appendChild(txt1); 
 
    td2.appendChild(txt2); 
 
    
 
    tr.appendChild(td1); 
 
    tr.appendChild(td2); 
 
    
 
    table.appendChild(tr); 
 
    
 
}

td 
 
{ 
 
    border: 1px solid black; 
 
}

<div id="table"> 
 
</div>

来源

2014-09-30 06:00:27

你会使用这个框架来帮助和jQuery或angularjs想到去解决它。然而，纯JavaScript的方式是这样的：

这将创建与输入的表花的数量，并在底部时数的变化，你也可以在JavaScript文件中添加更多的花卉种类总结起来。

var tabledef = []; 
 
tabledef['Rose'] = 40; 
 
tabledef['Daisy'] = 50; 
 
tabledef['Orchids'] = 60; 
 

 
writeTable(); 
 

 
function writeTable() { 
 
    var table = '<table border="1" style="width:30%">'; 
 
    var sum = 0; 
 
    for (var i in tabledef) { 
 
    sum = sum + tabledef[i]; 
 
    table = table + '<tr><td>' + i + '</td><td><input id="' + i + '" onchange="recalculate(this)" type="number" value="' + tabledef[i] + '"></td></tr>'; 
 
    } 
 
    table = table + '<tr><td>Flowers</td><td>' + sum + '</td></tr></table>'; 
 
    document.getElementById('myTable').innerHTML = table; 
 
} 
 

 
function recalculate(box) { 
 
    tabledef[box.id] = box.valueAsNumber; 
 
    writeTable(); 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title></title> 
 
</head> 
 

 
<body> 
 
    <div id="myTable"></div> 
 
    <script src="createTable.js"></script> 
 
</body> 
 

 
</html>

来源

2014-09-30 06:09:07

如何HTML表格转换为Javascript

回答

相关问题