HTML：使用JS動態添加元素

使用HTML5，我創建了一個由一系列對字段（活動日誌，時間）組成的簡單表。我一直在網上搜索如何使用JavaScript動態創建字段，但我只發現如何一次創建一個字段（使用getElementById）。問題是我想創建一系列標籤。意思是，當用戶點擊「添加另一個字段」時，我希望JS在表格上生成另一行，並使用一對字段，而不必硬編碼整個表格（下面的代碼段只有兩行，但我可能需要10-15行）。HTML：使用JS動態添加元素

下表顯示了該表的代碼片段。使用CSS時，頁面看起來像在屏幕截圖上。 screenshot：

我很感激任何幫助。在此先感謝。

<!DOCTYPE html> 
 
<html> 
 
<head lang="en"> 
 
    <meta charset="utf-8"> 
 
    <title>Activity Log</title> 
 
    <link href="styles.css" rel="stylesheet"> 
 
    <script type="text/javascript" language="javascript" src="script.js"></script> 
 

 
</head> 
 

 
<body> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="leftcol"> 
 
      <form name='mainForm' id='mainForm' method="get" action="http://www.randyconnolly.com/tests/process.php"> 
 
    <fieldset> 
 
    <legend>Input Activity Logs</legend> 
 
    <table id=tracklist> 
 
     <tr> 
 
     <th colspan="3">Track List: </th> 
 
     </tr> 
 
     <tr> 
 
     <td>1</td> 
 
     <td><label>Activity Log: </label><br/><input type="text" name="actlog1" class="required"></td> 
 
     <td><label>Time: </label><br/><input type="time" name="time1" class="required"></td> 
 
     </tr> 
 
     <tr> 
 
     <td>2</td> 
 
     <td><label>Activity Log: </label><br/><input type="text" name="actlog2" class="required"></td> 
 
     <td><label>Time: </label><br/><input type="time" name="time2" class="required"></td> 
 
     </tr> 
 
    </table> 
 
    <input type="submit" /> 
 
    </fieldset> 
 
</form> 
 
     </div> 
 

 
    </div> 
 
</div> 
 
</body> 
 
</html>

來源

2016-06-17 Emilio Zaidman

您可以使用.innerHTML + =方法連線到「添加活動」按鈕。每次單擊按鈕時，新表格行都會添加正確的索引編號。這裏是一個完整的工作示例 - 爲了簡單起見，只有一個文件，我已將javascript直接包含在HTML代碼中：

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="utf-8"> 
    <title>Activity Log</title> 
    <script> 

     // Wait until the window finishes loaded before executing any script 
     window.onload = function() { 

     // Initialize the activityNumber 
     var activityNumber = 3; 

     // Select the add_activity button 
     var addButton = document.getElementById("add_activity"); 

     // Select the table element 
     var tracklistTable = document.getElementById("tracklist"); 

     // Attach handler to the button click event 
     addButton.onclick = function() { 

     // Add a new row to the table using the correct activityNumber 
      tracklistTable.innerHTML += '<tr><td>' + activityNumber + '</td><td><label>Activity Log: </label><br/><input type="text" name="actlog' + activityNumber + '" class="required"></td><td><label>Time: </label><br/><input type="time" name="time' + activityNumber + '" class="required"></td></tr>'; 

      // Increment the activityNumber 
      activityNumber += 1; 
     } 

     } 

    </script> 

</head> 

<body> 
    <div class="container"> 
     <div class="row"> 
      <div class="leftcol"> 
       <form name='mainForm' id='mainForm' method="get" action="#"> 
       <fieldset> 
        <legend>Input Activity Logs</legend> 
        <table id="tracklist"> 
        <tr> 
         <th colspan="3">Track List: </th> 
        </tr> 
        <tr> 
         <td>1</td> 
         <td><label>Activity Log: </label><br/><input type="text" name="actlog1" class="required"></td> 
         <td><label>Time: </label><br/><input type="time" name="time1" class="required"></td> 
        </tr> 
        <tr> 
         <td>2</td> 
         <td><label>Activity Log: </label><br/><input type="text" name="actlog2" class="required"></td> 
         <td><label>Time: </label><br/><input type="time" name="time2" class="required"></td> 
        </tr> 
        </table> 
        <input type="submit" /> 
       </fieldset> 
       </form> 
       <button id="add_activity">Add Activity</button> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

來源

2016-06-17 04:08:43 samcervantes

謝謝！它的工作正如我所料。 –

你需要的是document.createElemrnt(tagNameString); 該函數不正是你的想法。然後你可以創造更多的元素，並讓他們成爲另一個的孩子。

來源

2016-06-17 03:24:43

在HTML中添加一個按鈕像<input type="button" onclick="cloneRow()" value="Clone Row" />並添加一個id來行被複制（EXM。<tr id="rowToClone">）然後添加下面的JavaScript函數在你的代碼

function cloneRow() { 
    var row = document.getElementById("rowToClone"); // find row to copy 
    var table = document.getElementById("tracklist"); // find table to append to 
    var clone = row.cloneNode(true); // copy children too 
    clone.id = "newID"; // change id or other attributes/contents 
    table.appendChild(clone); // add new row to end of table 
}

來源

2016-06-17 03:30:02

您可以使用現代化的JS框架添加動態元素如jQuery，Angularjs，淘汰賽等

檢查此鏈接： https://www.abeautifulsite.net/adding-and-removing-elements-on-the-fly-using-javascript

http://www.encodedna.com/2013/07/dynamically-add-remove-textbox-control-using-jquery.htm

http://mrbool.com/how-to-add-elements-html-dynamically-with-javascript/26752

來源

2016-06-17 03:30:31