阵列中的表格

-1

我想从数组中创建表格。我想要3行3列。行标题名称应为1,2,3。列应该是数组的名称：“国家”，“资本”，“人口”。阵列中的表格

这里是我的html：

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body>  
    <script>   
    var country = ["Norway", "Sweden", "Denmark"]; 
    var capital = ["Oslo", "Stockholm", "Copenhagen"]; 
    var population = ["5,2", "9.8", "5,7"];  

</body> 
</html>

来源

2017-05-29 Olaf lol

的[打印出在表Javascript数组]可能的复制（https://stackoverflow.com/questions/11958641/ print-out-javascript-array-in-table） –

你使用'jQuery'还是'Javascript'？ – blackandorangecat

你问这[这里]（https://stackoverflow.com/questions/43773927/javascript-array-to-html-table）??? –

下面是如何使用jQuery做到这一点的例子。根据Roko C. Buljan的评论，我已将append更改为concatenation。

//Array 
 
var country = ["Norway", "Sweden", "Denmark"]; 
 
var capital = ["Oslo", "Stockholm", "Copenhagen"]; 
 
var population = ["5,2", "9.8", "5,7"]; 
 

 
//Start the table 
 
var table = '<table>'; 
 

 
//Add the Headers 
 
table += '<thead><tr><th>Country</th><th>Capital</th><th>Population</th></tr></thead>'; 
 

 
//Start the body 
 
table += '<tbody>'; 
 

 
//Add the inner rows 
 
for (i = 0; i < country.length; i++) { 
 
    table += '<tr><td>' + country[i] + '</td><td>' + capital[i] + '</td><td>' + population[i] + '</td></tr>'; 
 

 
} 
 

 
//Close the body and the table 
 
table += '</tbody></table>'; 
 

 
//Add the completed table to the HTML 
 
$('#table').append(table);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='table'></div>

来源

2017-05-29 02:18:01 blackandorangecat

我知道OP明确要求三行三列，但是，如果循环基于数组长度而不是将其硬编码为“<3”，那么它会更好吗？ – nnnnnn

@nnnnnn是的，改变了它。 – blackandorangecat

不要 - 在循环内附加。只改为连接。 –

巢阵列到一个对象。从那里重复单元格附加到表格。

var country = ["Norway","Sweden", "Denmark"]; 
 
var capital = ["Oslo", "Stockholm", "Copenhagen"]; 
 
var population = ["5,2", "9.8", "5,7"]; 
 

 
var table={}; 
 
country.forEach((countries,key)=> 
 
table[key]={country:countries,capital:capital[key],population:population[key]}) 
 
function tableCreate(table,l=Object.keys(table).length){ 
 
    var count=1; 
 
var body = document.body, 
 
    tbl = document.createElement('table'); 
 
    tbl.style.width = '100px'; 
 
    tbl.style.border = '1px solid black'; 
 
    for(var i in table){ 
 
     var tr = tbl.insertRow(); 
 

 
tr.appendChild(document.createTextNode(count)); 
 
     for(var j in table[i]){ 
 
      td = tr.insertCell(); 
 
      td.appendChild(document.createTextNode(table[i][j])); 
 
      td.style.border = '1px solid black';  
 
     } 
 
     count++ 
 
    } 
 
    body.appendChild(tbl); 
 
} 
 
tableCreate(table);

或

var country = ["Norway","Sweden", "Denmark"]; 
 
var capital = ["Oslo", "Stockholm", "Copenhagen"]; 
 
var population = ["5,2", "9.8", "5,7"]; 
 

 
var table={}; 
 
country.forEach((countries,key)=> 
 
table[key]={country:countries,capital:capital[key],population:population[key]}) 
 
function tableCreate(table,l=Object.keys(table).length){ 
 
var body = document.body, 
 
    tbl = document.createElement('table'); 
 
    tbl.style.width = '100px'; 
 
    tbl.style.border = '1px solid black'; 
 
    for(var i in table){ 
 
     var tr = tbl.insertRow(); 
 
     for(var j in table[i]){ 
 
      var td = tr.insertCell(); 
 
      td.appendChild(document.createTextNode(table[i][j])); 
 
      td.style.border = '1px solid black';  
 
     } 
 
    } 
 
    body.appendChild(tbl); 
 
} 
 
tableCreate(table);

来源

2017-05-29 04:04:27 Rick

阵列中的表格

回答

相关问题