javascript - 动态 HTML 行，其中列表项与动态行级联

Question

我想知道是否有人可以帮助我解决我遇到的问题。基本上，我有一个表，其中有一个按钮用于添加索引从 0 到最后一个行号的动态行。

我在这里添加了一个 JS fiddle :jsfiddle.net/mfbcvprc/4

我正在寻找的是，当一个新的表行添加到动态表中时，表第一行中存在的下拉菜单将被复制，以便可以在下一个新行中使用它已添加。

有人可以向我展示一个如何完成此操作的示例吗？在这个阶段，我已经用尽了 Javascript 和 HTML 的知识，所以寻求一些指导!

Answer 1

首先检查这个答案:<强> https://stackoverflow.com/a/17378538/1800668

我已经更新了 jsfiddle.. 但是 jquery 遇到了我以前从未见过的奇怪问题，所以请参阅此 codepen:

<强> https://codepen.io/anon/pen/YqKEJq

基本上我所做的改变是这样的:

$(document).ready(function() {
  $('.btnAdd').click(function() {
    addRow();
    var newDropDown = $('#table1 tr:last').find('input[name*=area]');
    newDropDown.attr('list', 'areaList').removeAttr('type');
  });

它会像您所做的那样添加新行，然后查找新输入的输入，并更新其属性，使其与前一个相同。我从未使用过您的数据列表类型的控件，因此不确定这种方法是否好..但它在笔中有效。