时间戳

首页 > 解决方案 > 动态添加/编辑表格 HTML 表格行

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

问题描述

这让我发疯，我整天都在尝试各种 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>

标签： javascriptjqueryhtml-table

解决方案

没有一些示例代码很难提出建议，但我认为这有类似的作用。

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。

希望有帮助。

推荐阅读