1

我需要能够动态添加和删除不定数量的表行。我还需要能够在这些表行中链接选择框。我得到了预期的结果（这是错误的），但我不是 Javascript 爱好者，我不知道我在做什么。

我正在使用来自 Mika Tuupola 的 chained.js 脚本和几乎在任何地方都可以找到的“动态表”脚本。

<table id="table">
<tr><td><input id="dept" name="dept[]" /></td>
    <td><input id="service" name="service[]" /></td>
    <td><input id="reason" name="reason[]" /></td>
</tr>
</table>

<script language="javascript">
     $("#service").chained("#dept");
     $("#reason").chained("#dept");

     function addRow(table) {
          var row = $('#table tbody>tr:last').clone(false);
          row.insertAfter('#table tbody>tr:last');
     }

     function delRow(el) {

          while (el.parentNode && el.tagName.toLowerCase() != 'tr') {
               el = el.parentNode;
      }

          if (el.parentNode && el.parentNode.rows.length > 2) {
               el.parentNode.removeChild(el);
          }
     }
</script>

希望这足以说明问题。

显而易见的事情发生了，因为链式选择是基于 ID 的。在第一个下拉列表中进行选择后，“子”下拉列表将链接到第一个下拉列表。

我怀疑我需要以某种方式修改每个选择框的 ID，然后在链接分配中增加 ID。但我也怀疑可能有一种更简单的方法来做到这一点，或者它需要某种委托，因为我可能需要在添加表格行后销毁并重新分配链......？

我不知道。任何指向正确方向的指针将不胜感激。

更新

我做了一个小提琴。它仅适用于 Chrome。框架/扩展的某些组合在其他浏览器中工作和部分工作。但是我唯一可以让这个例子工作的是 Chrome。抱歉，我没有很多 JSFiddle 练习。

http://jsfiddle.net/J2Vef/11/

请注意，如果您从第一个下拉列表中选择一个选项，然后添加一行，会发生什么情况。添加行的第二个下拉列表中的所有选项将是第一行中第一个下拉列表的选项。

如果您添加一行然后开始尝试选择选项，那么无论您在第一个下拉菜单中放入什么，第二个下拉菜单都不会变为活动状态。

4

1 回答 1

1

试试这样的东西。您遇到的问题是您只能拥有一个具有一个 id 的元素。在您提供的示例中，您正在克隆表格行元素，但没有更改选择的 id 名称。此外，您还需要通过新 id 将新选择链接在一起。

这是jsFiddle

我确信它们可能是编写此代码块的一种更简洁的方法，但它会帮助您重新开始。

 var row = $('#tableID tbody:first').html();
 $("#series").chained("#mark");

 function addRow(tableID) {
      $(row).appendTo('#tableID');
      var rowCnt = $('#tableID tbody>tr').length;

     $('#tableID tbody>tr:last select:first').attr('id','mark'+rowCnt);
     $('#tableID tbody>tr:last select:last').attr('id','series'+rowCnt);

    $('#series'+rowCnt).chained("#mark"+rowCnt);
  }
于 2013-12-13T05:03:27.510 回答