动态添加/编辑表格HTML表格行

Question

这真让我发疯，我整天都在尝试各种Javascript和代码，但无法正常工作，所以希望这里的人可以为我指明正确的方向。

这是我当前的表格，我想创建一个“高级”选项，该选项允许每行添加其他详细信息

因此，如果您单击“高级”，它将扩展到这些功能，并允许您添加或删除其他行

这是我尝试通过扩展视图获取的表代码：

<table border="0" align="center" cellpadding="5" cellspacing="0">
  <tbody>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Hourly Rate</th>
      <th>Contract Until</th>
      <th>Advanced Details</th>
    </tr>
    <tr>
      <td bgcolor="#F2F2F2" style="text-align: center">John</td>
      <td bgcolor="#F2F2F2" style="text-align: center">Smith</td>
      <td bgcolor="#F2F2F2" style="text-align: center">$
      <input type="number" name="number57" id="number57"></td>
      <td bgcolor="#F2F2F2" style="text-align: center"><input type="date" name="date" id="date"></td>
      <td bgcolor="#F2F2F2" style="text-align: center"><input type="button" name="button" id="button" value="Advanced"></td>
    </tr>
	      <tr>
      <td bgcolor="#F2F2F2" style="text-align: center">&nbsp;</td>
      <td bgcolor="#F2F2F2" style="text-align: center">
        <label for="select">Project ID:</label>
        <select name="select" id="select">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select></td>
      <td bgcolor="#F2F2F2" style="text-align: center">$
        <input type="number" name="number57" id="number57"></td>
      <td bgcolor="#F2F2F2" style="text-align: center"><input type="date" name="date" id="date"></td>
      <td bgcolor="#F2F2F2" style="text-align: center"><input type="button" name="button" id="button" value="Add"> / 
        <input type="button" name="button4" id="button4" value="Remove"></td>
    </tr>
    <tr>
      <td style="text-align: center">Bob</td>
      <td style="text-align: center">Jones</td>
      <td style="text-align: center">$
      <input type="number" name="number58" id="number58"></td>
      <td style="text-align: center"><input type="date" name="date2" id="date2"></td>
      <td style="text-align: center"><input type="button" name="button2" id="button2" value="Advanced"></td>
    </tr>
    <tr>
      <td bgcolor="#F2F2F2" style="text-align: center">Tom</td>
      <td bgcolor="#F2F2F2" style="text-align: center">Collins</td>
      <td bgcolor="#F2F2F2" style="text-align: center">$
      <input type="number" name="number59" id="number59"></td>
      <td bgcolor="#F2F2F2" style="text-align: center"><input type="date" name="date3" id="date3"></td>
      <td bgcolor="#F2F2F2" style="text-align: center"><input type="button" name="button3" id="button3" value="Advanced"></td>
    </tr>
	  
	  	      <tr>
      <td bgcolor="#F2F2F2" style="text-align: center">&nbsp;</td>
      <td bgcolor="#F2F2F2" style="text-align: center">
        <label for="select">Project ID:</label>
        <select name="select" id="select">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select></td>
      <td bgcolor="#F2F2F2" style="text-align: center">$
        <input type="number" name="number57" id="number57"></td>
      <td bgcolor="#F2F2F2" style="text-align: center"><input type="date" name="date" id="date"></td>
      <td bgcolor="#F2F2F2" style="text-align: center"><input type="button" name="button" id="button" value="Add"> / 
        <input type="button" name="button4" id="button4" value="Remove"></td>
    </tr>
	  	      <tr>
      <td bgcolor="#F2F2F2" style="text-align: center">&nbsp;</td>
      <td bgcolor="#F2F2F2" style="text-align: center">
        <label for="select">Project ID:</label>
        <select name="select" id="select">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select></td>
      <td bgcolor="#F2F2F2" style="text-align: center">$
        <input type="number" name="number57" id="number57"></td>
      <td bgcolor="#F2F2F2" style="text-align: center"><input type="date" name="date" id="date"></td>
      <td bgcolor="#F2F2F2" style="text-align: center"><input type="button" name="button" id="button" value="Add"> / 
        <input type="button" name="button4" id="button4" value="Remove"></td>
    </tr>
    <tr>
      <td style="text-align: center">&nbsp;</td>
      <td style="text-align: center">&nbsp;</td>
      <td style="text-align: center">&nbsp;</td>
      <td style="text-align: center">&nbsp;</td>
      <td style="text-align: center"><input type="submit" name="submit" id="submit" value="Submit"></td>
    </tr>
  </tbody>
</table>

Answer 1

在没有一些示例代码的情况下很难提出建议，但是我认为这样做也很相似。

https://jsfiddle.net/3gkwoe7j/4/

关于动态添加元素的注释，您需要将事件侦听器附加到DOM中的静态对象，然后使用选择器。 （我假设您使用的是jQuery，因为您在问题中对其进行了标记）所以在我的示例中：

$('.table')
    .on('click', 'button.advanced.toggle', function() {
    $(this)
      .text(this.textContent === "LESS" ? "ADVANCED" : "LESS")
      .parents('.person')
        .find('.advanced.section').toggle();
  })

我将点击侦听器绑定到.table，然后通过选择器button.advanced.toggle进行过滤。

希望有帮助。