如何使用onClick事件生成新表行

Question

我有2列1行的表。 当用户单击“添加新行”按钮时，我希望它生成带有干净输入集的另一行。

当前HTML表：

<table class="table table-bordered">
  <thead>
    <tr>
      <th>Description</th>
      <th>Image</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><textarea rows="5" cols="1" placeholder="Enter task description here..."></textarea></td>
      <td><input type="file" onchange="previewFile()"><img src="" height="80"></td><br>
    </tr>
  </tbody>
</table>
<input type="button" value="Add new row">

当前外观：

当用户单击“添加新行”按钮时，我希望该表添加另一个表行。

Answer 1

很容易。 您可以使用insertAdjacentHTML

 function addNewRow() { let tds = document.getElementsByTagName("td"); tds[tds.length - 2].insertAdjacentHTML('afterend', '<td><textarea rows="5" cols="1" placeholder="Enter task description here..."></textarea></td>') } 

 <table class="table table-bordered"> <thead> <tr> <th>Description</th> <th>Image</th> </tr> </thead> <tbody> <tr> <td><textarea rows="5" cols="1" placeholder="Enter task description here..."></textarea></td> <td><input type="file" onchange="previewFile()"><img src="" height="80"></td><br> </tr> </tbody> </table> <input type="button" value="Add new row" onclick="addNewRow()"> 

随着占位符的增加：

 let i = 1; function addNewRow() { i++; let tds = document.getElementsByTagName("td"); tds[tds.length - 2].insertAdjacentHTML('afterend', `<td><textarea rows="5" cols="1" placeholder="Enter task description here #${i}"></textarea></td>`) } 

 <table class="table table-bordered"> <thead> <tr> <th>Description</th> <th>Image</th> </tr> </thead> <tbody> <tr> <td><textarea rows="5" cols="1" placeholder="Enter task description here #1"></textarea></td> <td><input type="file" onchange="previewFile()"><img src="" height="80"></td><br> </tr> </tbody> </table> <input type="button" value="Add new row" onclick="addNewRow()"> 

jQuery解决方案：

 function addNewRow() { $("td").eq($("td").length - 2).after('<td><textarea rows="5" cols="1" placeholder="Enter task description here..."></textarea></td>'); } 

 <table class="table table-bordered"> <thead> <tr> <th>Description</th> <th>Image</th> </tr> </thead> <tbody> <tr> <td><textarea rows="5" cols="1" placeholder="Enter task description here..."></textarea></td> <td><input type="file" onchange="previewFile()"><img src="" height="80"></td><br> </tr> </tbody> </table> <input type="button" value="Add new row" onclick="addNewRow()"> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> 

Answer 2

强烈建议您阅读render功能并在此处实现： https : //gomakethings.com/rendering-content-with-vanilla-javascript/