使用javascript將表添加到當前頁面

我是一名新的JavaScript學習者。我目前正在嘗試通過使用按鈕將新表添加到現有頁面。該函數將列表中的數字，其平方和立方體值打印到一個表中。當我按下按鈕時，舊錶被刪除並被新表覆蓋。我如何將新表添加到頁面上？所有的建議表示讚賞。這裏是我的代碼使用javascript將表添加到當前頁面

<!DOCTYPE html> 

<html lang="en"> 

<head> 
    <title> 
    </title> 
    <script> 
     function table(a) { 
      document.write('<table>'); 
      document.write("<tr><td>Number</td><td>Square</td><td>Cube</td></tr>"); 
      for (var i = 0; i < a.length; i++) { 
       document.write("<tr><td>" + a[i] + "</td><td>" + Math.pow(a[i], 2) + "</td><td>" + Math.pow(a[i], 3) + "</td></tr>"); 
      } 
      document.write('</table>') 
     } 

    </script> 
</head> 

<body> 
    <script> 
     var list1 = [1, 2, 3, 4, 5, 6]; 
     table(list1); 

    </script> 
    <input type="button" onclick="table([7,8,9,10]) " value="dispay table"> 
    <!-- this button removes overwrites the old table--> 
</body> 

</html>

來源

2017-09-13 Yu Liao Peng

不要使用'document.write（）的'，並學習如何使用DOM API。查看原始DOM API或查看jQuery。 – zero298

[document.write（）覆蓋文檔可能的重複？]（https://stackoverflow.com/questions/19941866/document-write-overwriting-the-document） – zero298

-1

我強烈建議看看這個：https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append。

如果你看看這些例子，你可以看到一個更好的DOM工作方式，其中包括如何創建元素以及如何在網頁上操作元素。

關於您的具體問題，.write函數在新環境中調用時似乎會覆蓋，因此您需要將創建的所有文本保存到列表，更新列表，然後更新DOM，或者使用DOM API（這會更容易）。

我做了一個JS bin更難的方法，但這仍然有問題，因爲它會覆蓋原來的按鈕。

來源

2017-09-13 18:29:54 iHowell

Document.write清除整個頁面。您應該修改HTML。

在下面的代碼中，我創建了一個ID（「tableDiv」），我可以在JavaScript代碼（document.getElementById）中找到div。

第一步清除html內部（替換舊錶），然後根據您的代碼構建一個html字符串。最後它將HTML放入容器中。

<!DOCTYPE html> 
 

 
<html lang="en"> 
 

 
<head> 
 
    <title> 
 
    </title> 
 
    <script> 
 
    function table(a) { 
 
     // remove the old table 
 
     var container = document.getElementById('tableDiv'); 
 
     container.innerHTML = ""; 
 

 
     // create table 
 
     var html = "<table id=\"myTable\"><tr><td>Number</td><td>Square</td><td>Cube</td></tr>"; 
 

 
     // add cells 
 
     for (var i = 0; i < a.length; i++) { 
 
     html += ("<tr><td>" + a[i] + "</td><td>" + Math.pow(a[i], 2) + "</td><td>" + Math.pow(a[i], 3) + "</td></tr>"); 
 
     } 
 

 
     // end table 
 
     html += "</table>"; 
 

 
     container.innerHTML = html; 
 
    } 
 
    </script> 
 
</head> 
 

 
<body> 
 

 
    <div id="tableDiv"> 
 

 
    </div> 
 

 
    <input type="button" onclick="table([7,8,9,10]) " value="display table"> 
 
    <!-- this button removes overwrites the old table--> 
 

 
    <script> 
 
    var list1 = [1, 2, 3, 4, 5, 6]; 
 
    table(list1); 
 
    </script> 
 

 
</body> 
 

 
</html>

來源

2017-09-13 18:41:27

使用javascript將表添加到當前頁面

回答

相關問題