使用Javascript數組創建HTML表格？

我給了一個實驗室任務。現在的問題是如下： Create Table Using JS Arrays 使用Javascript數組創建HTML表格？

我想出了以下代碼：

<!DOCTYPE html> 
<html> 
<head> 
<title> Manan Tyagi 16BCE1240</title> 

<p style="text-align:center;color:purple;font-size:30px" >Coordinates Of State Capitals</p> 
<p id="demo"></p> 

<script> 
var capital=["Montgomery","Juneau","Phoenix","Little Rock","Sacramento","Denver","Hartford","Dover","Tallahassee","Atlanta"]; 
var state=["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia"]; 
var code=["AL","AK","AZ","AR","CA","CO","CT","DE","FL","GA"]; 
var latitude=[32,58,33,35,38,40,42,39,31,34]; 
var longitude=[-86,-134,-113,-92,-121,-105,-73,-76,-84,-84]; 
var htmlstr="<tbody>"; 
for(var i=0;i<10;++i) 
{ 
    htmlstr+="<tr>"+"<td>"+capital[i]+"</td>"+"<td>"+state[i]+"</td>"+"<td>"+code[i]+"</td>"+"<td>"+latitude[i]+"</td>"+"<td>"+longitude[i]+"</td>"+"</tr>"+"<br>"; 
} 
htmlstr+="</tbody>"; 
document.write(htmlstr); 
</script> 

</body> 
</head> 
</html>

我用document.write（）的功能只是爲了顯示所獲得的輸出。我想創建圖片中給出的表格嗎？代碼中哪裏以及哪些內容應該更改才能正常運行？

謝謝。

[編輯]我關心排序部分。如何根據特定列對錶格進行排序？

來源

2017-08-14 Manan Tyagi

什麼是你的代碼的輸出，以及它是如何從實驗室問題有什麼不同？你在問格式（表格的顏色和邊界），還是排序和平均部分？ – Neil

尼爾我可以格式化表，這不是問題。我很關心排序部分。如何根據特定列對錶格進行排序？ –

我建議你的數據格式是錯誤的，因爲你有5個獨立的數組（即排序緯度數組，並且不會對大寫數組進行排序）。有沒有可以使用的數據結構，以便一行中的所有項目都是同一個數組元素的一部分？（我試圖提示你正確的答案，而不是直接給你答案）。 – Neil

您錯過了包含<table>標記。請參閱http://html.com/tables/

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title> Manan Tyagi 16BCE1240</title> 
 

 
    <p style="text-align:center;color:purple;font-size:30px">Coordinates Of State Capitals</p> 
 
    <p id="demo"></p> 
 

 
    <script> 
 
    var capital = ["Montgomery", "Juneau", "Phoenix", "Little Rock", "Sacramento", "Denver", "Hartford", "Dover", "Tallahassee", "Atlanta"]; 
 
    var state = ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia"]; 
 
    var code = ["AL", "AK", "AZ", "AR", "CA", "CO", "CT", "DE", "FL", "GA"]; 
 
    var latitude = [32, 58, 33, 35, 38, 40, 42, 39, 31, 34]; 
 
    var longitude = [-86, -134, -113, -92, -121, -105, -73, -76, -84, -84]; 
 
    var htmlstr = "<table><tbody>"; 
 
    for (var i = 0; i < 10; ++i) { 
 
     htmlstr += "<tr>" + "<td>" + capital[i] + "</td>" + "<td>" + state[i] + "</td>" + "<td>" + code[i] + "</td>" + "<td>" + latitude[i] + "</td>" + "<td>" + longitude[i] + "</td></tr>"; 
 
    } 
 
    htmlstr += "</tbody></table>"; 
 
    document.write(htmlstr); 
 
    </script> 
 
</head> 
 

 
<body> 
 
</body> 
 

 

 
</html>

來源

2017-08-14 09:06:41 Sankar

使用Javascript數組創建HTML表格？

回答

相關問題