如何在純javascript中使用變量插入數組值如元素HTML？

請參考變量「TEST」，如何使其成爲innerHTML，而不是像onload那樣使用純文本？如何在純javascript中使用變量插入數組值如元素HTML？

<!DOCTYPE html> 
 
<head> 
 
<title>Sum Table Column</title> 
 
<script> 
 

 
window.onload=function() { 
 

 
var TEST = "<font color='#ff0000'>Apple</font>"; 
 

 
    var values = new Array(3); 
 
    values[0] = [123.45, TEST, true] ; 
 
    values[1] = [65, "banana", false]; 
 
    values[2] = [1034.99, "cherry", false]; 
 

 
    var mixed = document.getElementById("mixed"); 
 

 
    // IE7 only supports appending rows to tbody 
 
    var tbody = document.createElement("tbody"); 
 

 
    // for each outer array row 
 
    for (var i = 0 ; i < values.length; i++) { 
 
    var tr = document.createElement("tr"); 
 

 
    // for each inner array cell 
 
    // create td then text, append 
 
    for (var j = 0; j < values[i].length; j++) { 
 
     var td = document.createElement("td"); 
 
     var txt = document.createTextNode(values[i][j]); 
 
     td.appendChild(txt); 
 
     tr.appendChild(td); 
 
    } 
 

 
    // append row to table 
 
    // IE7 requires append row to tbody, append tbody to table 
 
    tbody.appendChild(tr); 
 
    mixed.appendChild(tbody); 
 
    } 
 

 
} 
 

 
</script> 
 

 
</head> 
 
<body> 
 
<table id="mixed"> 
 
<tr><th>Value One</th><th>Value two</th><th>Value three</th></tr> 
 
</table> 
 
</body>

請參考變量「TEST」，如何使其成爲innerHTML的，而不是像普通的文本時的onload？

來源

2015-09-13 Hedi Herdiana

BTW代td.innerHTML = values[i][j];，你能避免使用'行與TBODY搞亂= table.insertRow（）'，它追加行的最後一排該表並分配對* row *的引用。請參閱[MDN * insertRow *]（https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement/insertRow）。另外，最好通過應用一個類來實現突出顯示，這樣你就可以亂搞CSS來改變文本的外觀，而不是在你想要的時候亂搞javascript，比如說綠色而不是紅色。 * font *元素在HTML 4中被棄用，並且在HTML 5中被刪除。 – RobG

試用var txt = document.createTextNode(values[i][j]);

<!DOCTYPE html> 
 
<head> 
 
<title>Sum Table Column</title> 
 
<script> 
 

 
window.onload=function() { 
 

 
var TEST = "<font color='#ff0000'>Apple</font>"; 
 

 
    var values = new Array(3); 
 
    values[0] = [123.45, TEST, true] ; 
 
    values[1] = [65, "banana", false]; 
 
    values[2] = [1034.99, "cherry", false]; 
 

 
    var mixed = document.getElementById("mixed"); 
 

 
    // IE7 only supports appending rows to tbody 
 
    var tbody = document.createElement("tbody"); 
 

 
    // for each outer array row 
 
    for (var i = 0 ; i < values.length; i++) { 
 
    var tr = document.createElement("tr"); 
 

 
    // for each inner array cell 
 
    // create td then text, append 
 
    for (var j = 0; j < values[i].length; j++) { 
 
     var td = document.createElement("td"); 
 
     td.innerHTML = values[i][j]; 
 
     tr.appendChild(td); 
 
    } 
 

 
    // append row to table 
 
    // IE7 requires append row to tbody, append tbody to table 
 
    tbody.appendChild(tr); 
 
    mixed.appendChild(tbody); 
 
    } 
 

 
} 
 

 
</script> 
 

 
</head> 
 
<body> 
 
<table id="mixed"> 
 
<tr><th>Value One</th><th>Value two</th><th>Value three</th></tr> 
 
</table> 
 
</body>

來源

2015-09-13 23:36:05 guest271314

我一直在尋找方法並耗盡時間，但非常感謝。您迅速做出反應並提供正確的解決方案。 @ guest271314 –

如何在純javascript中使用變量插入數組值如元素HTML？

回答

相關問題