[英]Dynamically creating an html table with Javascript
我正在嘗試使用Javascript根據用戶輸入（實際上是兩三個表，這取決於用戶輸入..）創建一個表，我非常熟悉PHP，並且已經可以在PHP中使用它，但是我希望用戶以便能夠在查詢表之前查看該表。 我在這里找到了一個腳本，該腳本部分完成了我想要的工作，並嘗試對其進行了編輯（我發現它與PHP令人驚訝地相似）基本上，它計算按行和列將其拆分的單元格（端口）總數，“ super”列如果用戶希望將其拆分為多個表，這些表彼此並列，因此使用div標簽，則使用。 這是我的JS：
<html>
<head>
<script type="text/javascript">
function createTable()
{
var num_ports = document.getElementById('ports').value;
var num_super = document.getElementById('super').value;
var num_rows = document.getElementById('rows').value;
var num_cols = document.getElementById('cols').value;
var tbody = '';
var colStart = num_cols / num_super;
for( var i=0; i<num_super; i++){
var theader = '<div><table border="1">\n';
for(u=1; u<=num_row; u++){
tbody += '<tr>';
for( var j=0; j<colStart; j++)
{
tbody += '<td>';
tbody += 'Cell ' + i + ',' + j;
tbody += '</td>'
}
tbody += '</tr>\n';
}
var tfooter = '</table></div>';
document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;
}
</script>
</head>
<body>
<form name="tablegen">
<label>Ports: <input type="text" name="ports" id="ports"/></label><br />
<label>Super Columns: <input type="text" name="super" id="super"/></label><br />
<label>Rows: <input type="text" name="rows" id="rows"/></label><br />
<label>Columns: <input type="text" name="cols" id="cols"/></label><br/>
<input name="generate" type="button" value="Create Table!" onclick='createTable();'/>
</form>
<div id="wrapper"></div>
</body>
</html>
這是經過PHP處理的最終輸出的樣子（端口：24，列：6，行：2，超級：2）：
這是我一起放的js小提琴： http : //jsfiddle.net/9SnLB/
當前，當我單擊該按鈕時，什么都沒有發生，但是，我想那是我的第一個問題，但是我是否可以正確進行設置？ 為什么按鈕不能運行該功能？
兩個錯誤。 您沒有關閉功能括號，即結尾處缺少}。 第二個是您使用$ row而不是您創建的num_rows變量。 由於某種原因，它在小提琴中不起作用，但是在本地起作用。 小提琴說createTable函數是未定義的。
function createTable()
{
var num_ports = document.getElementById('ports').value;
var num_super = document.getElementById('super').value;
var num_rows = document.getElementById('rows').value;
var num_cols = document.getElementById('cols').value;
var tbody = '';
var colStart = num_cols / num_super;
for( var i=0; i<num_super; i++){
var theader = '<div><table border="1">\n';
for($u=1; $u<=num_rows; $u++){
tbody += '<tr>';
for( var j=0; j<colStart; j++)
{
tbody += '<td>';
tbody += 'Cell ' + i + ',' + j;
tbody += '</td>'
}
tbody += '</tr>\n';
}
var tfooter = '</table></div>';
document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;
}
}
var table = [["a1","a2","a3"]["b1","b2","b3"]["c1","c2","c3"]];
for(x = table.length;x > 0;x--) {
document.write("<tr>");
for(y = table[x].length;y > 0;y--) {
document.write("<td>"+y+"</td>");
}
document.write("</tr>");
}
抱歉，如果語法錯誤。 你明白了。
您需要將jsFiddle框架更改為“ no wrap（head）”，並更正javascript中的錯誤。 “ no wrap（head）”將允許訪問該功能。 “ for（$ u = 1”循環缺少右括號，$ row應該是num_rows。“ for（j = 0”循環缺少最后一個“ tbody =”的分號。
這是更正的js。
function createTable() {
var num_ports = document.getElementById('ports').value;
var num_super = document.getElementById('super').value;
var num_rows = document.getElementById('rows').value;
var num_cols = document.getElementById('cols').value;
var tbody = '';
var colStart = num_cols / num_super;
for (var i = 0; i < num_super; i++) {
var theader = '<div><table border="1">\n';
for ($u = 1; $u <= num_rows; $u++) {
tbody += '<tr>';
for (var j = 0; j < colStart; j++) {
tbody += '<td>';
tbody += 'Cell ' + i + ',' + j;
tbody += '</td>';
}
}
tbody += '</tr>\n';
}
var tfooter = '</table></div>';
document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;
}
在動態創建的HTML表中編寫Javascript If條件
[英]Writing Javascript If condition in a dynamically creating HTML table
在Java / HTML中使用2D數組在表中動態創建/實現數據
[英]Dynamically Creating / Implementing Data in A Table with a 2D Array in Javascript/Html
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.