[英]Need help w/ JavaScript and creating an html table from array
我已嘗試通過谷歌找到的所有內容,但沒有任何工作正常。 輸出只是一行,列出了數組的所有內容。 我需要的是一種編寫數組內容的方法,但是在3個單元格之后,自動開始一個新的行。 我將發布我在下面提出的代碼以及問題。 (是的,這是來自作業。:()
//***(8) place the words in the string "tx_val" in a table with a one pixel border,
//*** with a gray backgound. Use only three cells per row. Empty cells should contain
//*** the word "null". Show the table in the span block with id="ans8"
var count = i % 3;
var nrow = "";
var out = "<table border='1' bgcolor='gray'><tr>"
for (var i=0; i<txArr.length; i++)
{
out += ("<td>" + txArr[i] + "</td>");
count++;
if (count % 3 == 0)
{
nrow += "</tr><tr>";
}
}
document.getElementById('ans8').innerHTML = out + nrow;
你需要在表格內打印tr
(並添加一個</table>
!):
var count = i % 3; // btw. what's this??
var nrow = "";
var out = "<table border='1' bgcolor='gray'><tr>"
for (var i=0; i<txArr.length; i++)
{
out += "<td>" + txArr[i] + "</td>";
count++;
if (count % 3 == 0)
out += "</tr><tr>";
}
out += "</table>";
document.getElementById('ans8').innerHTML = out;
而不是試圖寫出HTML,嘗試操縱dom。 對我來說似乎更直截了當。 看看以下內容:
var row = table.insertRow();
msdn mdc
var cell = row.insertCell();
msdn mdc
var cellContent = document.createTextNode(txArr[i]);
msdn mdc
cell.appendChild(cellContent);
msdn mdc
要決定何時開始新行,只需對i
使用模數運算符( %
msdn mdc ):
if (i % 3 == 0)
{
row = table.insertRow()
}
你最終得到這樣的東西:
var container = document.getElementById("ans8");
var t = container.appendChild(document.createElement("table"));
var row;
txArr.forEach(function (item, i)
{
if (i % 3 == 0)
{
row = t.insertRow()
}
row.insertCell().appendChild(document.createTextNode(item));
});
我會留下一點讓你弄清楚 - 邊框,背景顏色,在那里得到“null”這個詞。 畢竟這是你的功課。 :-)
此外,對於舊版瀏覽器,您需要自己添加Array.forEach 。
用類似的東西來完成它可能有點容易
buffer = "<table>";
for(var r = 0; r < 10; r++){
buffer += "<tr>";
for(var c = 0; c < 3 ; c++){
buffer += "<td>Cell: " + r + ":" + c + "</td>";
}
buffer += "</tr>";
}
buffer += "</table>";
document.getElementById("ans8").innerHTML = buffer;
這將為每行創建一個30行長,3列的表。
您可能會過早地將值分配給“計數”,因為您不知道我到底是什么。 並且你沒有在任何地方吐出nrow的價值......把它改成了。
var count;
var nrow = "";
var out = "<table border='1' bgcolor='gray'><tr>"
for (var i=0; i<txArr.length; i++)
{
out += ("<td>" + txArr[i] + "</td>");
count++;
if (count % 3 == 0)
{
out += "</tr><tr>";
}
}
document.getElementById('ans8').innerHTML = out + nrow;
基本上我會把它分成3個功能,以便於閱讀和維護。 這些函數包括創建單元格,行和表格。 這肯定簡化了閱讀代碼。 由於我還沒有測試過,下面是我要做的一個例子。
function createTableCell(value) {
return value == null? "<td>NULL</td>":"<td>" + value + "</td>";
}
function createTableRow(array) {
var returnValue = "";
for (var i = 0; i < array.length; i++) {
returnValue = returnValue + createTableCell(array[i]);
}
return "<tr>" + returnValue + "</tr>";
}
function arrayToTable(array, newRowAfterNArrayElements) {
var returnValue = "<table>";
for (var i = 0; i < array.length; i = i + newRowAfterNArrayElements) {
returnValue = returnValue + createTableRow(array.split(i, (i + newRowAfterNArrayElements) - 1));
}
return returnValue + "</table>";
}
document.getElementById("ans8").innerHTML = arrayToTable(txArr, 3);
此外,這使您的代碼更具動態性和可重用性。 假設您有一個要在每4個元素拆分的數組。 而不是硬編碼,你可以簡單地傳遞一個不同的參數。
我更喜歡使用陣列而不是連接
var html = [];
html.push("<table><tr>");
var i = 0;
for (var k in txArr)
{
if(i>=3){
i=0;
html.push("</tr><tr>");
}
html.push("<td>" + txArr[k] + "</td>");
i++;
}
html.push("</tr></table>");
document.getElementById('ans8').innerHTML = html.join('');
// wrapped in function
function arrayToTable(a,cols){
var html = [];
html.push("<table><tr>");
var i = 0;
for (var k in a)
{
if(i>=cols){
i=0;
html.push("</tr><tr>");
}
html.push("<td>" + a[k] + "</td>");
i++;
}
html.push("</tr></table>");
return html.join('')
}
document.getElementById('ans8').innerHTML = arrayToTable(txArr, 3);
這是使用DOMBuilder執行此操作的實例,並使用相同的代碼生成DOM元素和HTML字符串。
碼:
var dom = DOMBuilder.elementFunctions;
function arrayToTable(a, cols) {
var rows = [];
for (var i = 0, l = a.length; i < l; i += cols) {
rows.push(a.slice(i, i + cols));
}
return dom.TABLE({border: 1, bgcolor: 'gray'},
dom.TBODY(
dom.TR.map(rows, function(cells) {
return dom.TD.map(cells);
})
)
);
}
var data = [1, 2, null, 3, null, 4, null, 5, 6];
document.body.appendChild(arrayToTable(data, 3));
document.body.appendChild(
dom.TEXTAREA({cols: 60, rows: 6},
DOMBuilder.withMode("HTML", function() {
return ""+arrayToTable(data, 3);
})
)
);
是的,你可以從頭開始構建......但是有更快的方法。 扔一個網格。 網格將采用字符串,數組,json輸出等數據並將其轉換為正確的HTML輸出表,並允許您通過排序,分頁,過濾等對其進行擴展。
我個人最喜歡的是DataTables ,但還有很多其他的。
一旦你熟練,設置其中一個字面需要5分鍾。 節省你的大腦力量來治愈世界飢餓,編碼下一個facebook等等....
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.