使用JavaScript通过一个选择输入添加TR + TD内容

Cylion 发表于 Dev

柱状

我有一个选择输入，其中包含大约5个选项。我还有一个空表将使用这种格式：

<table>
   <tr>
      <td>X(for delete)</td>
      <td>Option name</td>
      <td>Value that is linked to that option name</td>
   </tr>
</table>

所以我想要的是：当某人从选择菜单中选择一个选项时，它必须<tr>在表中添加一个3的新元素<td>。第一个只是一个“ X”或图像，以便我可以删除<tr>，第二个是选项名称，第三个是链接到该选项的值。

因此，我该如何制作一个程序，为我和TD添加TR。第二部分是：我该如何做，以便当用户偏向X时删除整个<tr>父级。如果可能的话，如何将3 TD的所有值相加并显示在屏幕上？

我知道这很多，但是这里有人可以帮助我吗？谢谢你的时间。

佐肯17

尝试此操作，希望它以正确的方式为您提供帮助：

$('button').click(function() {
  $('table').append('<tr><td class="remove">X</td><td class="optionValue">' + $('select option:selected').text() + '</td><td class="linkedValue">' + $('select').val() + '</td></tr>');
})

$(document).on('click', '.remove', function() {
    $(this).parent().remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<button type="button">Enter</button>
<br />
<br/>
<table>
  <tr>
    <td>X(for delete)</td>
    <td>Option name</td>
    <td>Value that is linked to that option name</td>
  </tr>
</table>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。