Question

当我点击添加行按钮时，为什么在foo function dos中追加选择值的值不会触发？

  $(document).on("click", '.tdAdd', function () {
      //alert($(this).closest('tr').index());
      var newRow = $("<tr>");
      var cols = "";
      cols += '<td><input type="button" value="Add Row" class="tdAdd"/></td>';
      cols += '<td><input type="button" value="Delete" class="tdAdd"/></td>';
      cols += '<td><input type="text" /></td>';
      cols += '<td><select class = "t">' + foo($(this).closest('tr').index() + 1) + '</select></td>';
      newRow.append(cols);
      newRow.insertAfter($(this).closest("tr"));
  });

请参阅此FIDDLE了解演示。

  function foo() {
      var select = $('.t')
          .append($("<option></option>")
          .attr("value", 'one')
          .text('One'));
      select = $('.t')
          .append($("<option></option>")
          .attr("value", 'two')
          .text('Two'));

  }

Answer 1

有几个问题，首先是foo()并没有返回任何内容，因此您尝试将undefined连接到字符串中。

接下来你在foo()内所做的事情没有意义，因为$('.t')是页面中每个元素与该类的集合。

以下将克隆第一个选择，将其值设置为null，然后返回要添加到字符串中的html

  function foo(index) {
      var $select = $('.t:first').clone().val('');
      return $select.html(); // return the innerHtml of the select as string
  }

的 DEMO

要真正简化整个addRow，您可以克隆整行，重置表单控件的值并附加该克隆...所有这些都不需要任何新字符串

$(document).on("click", '.tdAdd', function () { var $currentRow = $(this).closest('tr'); var $newRow = $currentRow.clone(); $newRow.find(':input').val(''); $currentRow.after($newRow); })

Answer 2

问题是，您正在尝试将选项添加到下一行当前＆＃39; tr＆＃39;这将始终是DOM中可用的下一行（最初在当前行旁边的那一行 - 橙行）。要在代码中添加选项，您必须首先将其添加到DOM，然后插入选项标记。

对代码的最小更改：

 $(document).on("click", '.tdAdd', function () {
      //alert($(this).closest('tr').index());
      var newRow = $("<tr>");
      var cols = "";
      cols += '<td><input type="button" value="Add Row" class="tdAdd"/></td>';
      cols += '<td><input type="button" value="Delete" class="tdAdd"/></td>';
      cols += '<td><input type="text" /></td>';
      cols += '<td><select class = "t"></select></td>';
      newRow.append(cols);
      newRow.insertAfter($(this).closest("tr"));
      foo($(this).closest('tr').index() + 1);//add options once the newly created 'select' is available in DOM
  });

Answer 3

您正在追加JQuery对象。我已经提取了HTML并附加了它。（see this answer）：

function foo(index) {
    var select = $("<option></option>")
                 .attr("value", 'one')
                 .text('One')
                 .prop('outerHTML');
    return select;
}

我已更新更新的小提琴

http://jsfiddle.net/8r0rdcLf/7/

选择不附加在动态添加的行上的元素选项

3 个答案: