動態顯示HTML表格內容

有一個問題，我無法弄清楚在這段代碼中。它應該迭代數組對象並將它們顯示在HTML表格中。第三行應該包含按鈕。爲什麼它不顯示任何東西？動態顯示HTML表格內容

HTML代碼：

<html> 
<head> 

</head> 
<body> 
<div id="wrapper"> 
<table align='center' cellspacing=2 cellpadding=5 id="data_table" border=1> 
<tr> 
<th>Name</th> 
<th>Level</th> 
<th>Action</th> 
</tr> 

<tr id="table-rows"> 
<td><input type="text" id="new_name"></td> 
<td> 
    <select name="levels-list" id="levels-list"> 
    <option value="A" id="option-1">A</option> 
    <option value="B" id="option-2">B</option> 
    <option value="C" id="option-3">C</option> 
    </select> 
</td> 
<td><input type="button" class="add" value="Add Row" id="add-button"></td> 
</tr> 

</table> 
</div> 
<script type="text/javascript" src="myscript.js"></script> 
</body> 
</html>

的Javascript：

var myArray = [{"name":"aaa","level":"A"},{"name":"bbb","level":"B"},{"name":"ccc","level":"C"}]; 


display(); 
function display() { 
     var length = myArray.length; 
     var htmltext = ""; 

     for (var i = 1; i < length; i++) { 
      htmltext += 
      "<tr id='row"+i+"'>\ 
       <td>"+myArray[i].name+"</td>\ 
       <td>"+myArray[i].level+"</td>\ 
       <td>\ 
        <input type='button' id='edit_button"+i+"' value='Edit' class='edit' onclick='edit_row("+i+")'> \ 
        <input type='button' id='save_button"+i+"' value='Save' class='save' onclick='save_row("+i+")'> \ 
        <input type='button' value='Delete' class='delete' onclick='delete_row("+i+")'>\ 
       </td>\ 
      </tr>"; 
     } 
     document.getElementById("table-rows").innerHTML = htmltext; 
    }

來源

2017-05-26 user7945230

你可以追加「表格行」本身，因此你的行中有你不想要的行，添加一個''並添加到如果你想這樣做。 –

您需要使用ID引用表體，並且您的for循環應該將init初始化爲0，以便遍歷整個數組。

var myArray = [{ 
 
    "name": "aaa", 
 
    "level": "A" 
 
}, { 
 
    "name": "bbb", 
 
    "level": "B" 
 
}, { 
 
    "name": "ccc", 
 
    "level": "C" 
 
}]; 
 

 

 
display(); 
 

 
function display() { 
 
    var length = myArray.length; 
 
    var htmltext = ""; 
 

 
    for (var i = 0; i < length; i++) { 
 
    htmltext += 
 
     "<tr id='row" + i + "'>\ 
 
       <td>" + myArray[i].name + "</td>\ 
 
       <td>" + myArray[i].level + "</td>\ 
 
       <td>\ 
 
        <input type='button' id='edit_button" + i + "' value='Edit' class='edit' onclick='edit_row(" + i + ")'> \ 
 
        <input type='button' id='save_button" + i + "' value='Save' class='save' onclick='save_row(" + i + ")'> \ 
 
        <input type='button' value='Delete' class='delete' onclick='delete_row(" + i + ")'>\ 
 
       </td>\ 
 
      </tr>"; 
 
    } 
 
    document.getElementById("table-rows").innerHTML = htmltext; 
 
}

<html> 
 

 
<head> 
 
</head> 
 

 
<body> 
 
    <div id="wrapper"> 
 
    <table align='center' cellspacing=2 cellpadding=5 id="data_table" border=1> 
 
     <thead> 
 
     <tr> 
 
      <th>Name</th> 
 
      <th>Level</th> 
 
      <th>Action</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody id="table-rows"> 
 
     <tr> 
 
      <td><input type="text" id="new_name"></td> 
 
      <td> 
 
      <select name="levels-list" id="levels-list"> 
 
    <option value="A" id="option-1">A</option> 
 
    <option value="B" id="option-2">B</option> 
 
    <option value="C" id="option-3">C</option> 
 
    </select> 
 
      </td> 
 
      <td><input type="button" class="add" value="Add Row" id="add-button"></td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 

 
</body> 
 

 
</html>

來源

2017-05-26 16:39:31 Woodrow

而不是

document.getElementById("table-rows").innerHTML = htmltext;

嘗試

document.getElementById("table-rows").append(htmltext);

來源

2017-05-26 16:37:26

[Node.append（）]（https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append）不解析字符串。 – PeterMader

-2

使用車把。 http://handlebarsjs.com/ 我自己將它用於動態表格。加上它的不好的做法插入html與js。

來源

2017-05-26 16:49:46

動態顯示HTML表格內容

回答

相關問題