Question

我要在克隆新行时将上一行的所选选项值克隆到新的原始文件中。

$("#btnAdd").on("click", function() {
  var $tableBody = $('#tbl').find("tbody"),
    $trLast = $tableBody.find("tr:last"),
    $trNew = $trLast.clone();
  $trLast.after($trNew);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='tbl'>
  <tbody>
    <tr>
      <td>
        <p>Cell3</p>
      </td>
      <td>
        <select>
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

<input type="button" id="btnAdd" value="Add New Row"></button>

我无法复制选择的最后一行下拉列表值，是否有任何解决方案或克隆方法无法实现？

Answer 1

您需要将select元素的值设置为.clone()，而不要故意复制textarea和select的动态状态

注意：出于性能的考虑，某些表单元素（例如，输入到textarea中的用户数据以及对select进行的用户选择）的动态状态不会复制到克隆的元素中。克隆input元素时，该元素的动态状态（例如，键入文本input的用户数据和对checkbox的用户选择）保留在克隆的元素中。

使用

$trNew.find('select').val($trLast.find('select').val());

$("#btnAdd").on("click", function() {
  var $tableBody = $('#tbl').find("tbody"),
    $trLast = $tableBody.find("tr:last"),
    $trNew = $trLast.clone();
  //Set updated value
  $trNew.find('select').val($trLast.find('select').val())
  $trLast.after($trNew);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='tbl'>
  <tbody>
    <tr>
      <td>
        <p>Cell3</p>
      </td>
      <td>
        <select>
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

<input type="button" id="btnAdd" value="Add New Row"></button>

如果案例tr有多个选择，则可以基于元素的index来获取值。

$trNew.find('select').val(function(index, value) {
  return $trLast.find('select').eq(index).val();
});

$("#btnAdd").on("click", function() {
  var $tableBody = $('#tbl').find("tbody"),
    $trLast = $tableBody.find("tr:last"),
    $trNew = $trLast.clone();

  $trNew.find('select').val(function(index, value) {
    return $trLast.find('select').eq(index).val();
  });
  $trLast.after($trNew);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='tbl'>
  <tbody>
    <tr>
      <td>
        <p>Cell3</p>
      </td>
      <td>
        <select>
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
        </select>
      </td>
      <td>
        <select>
          <option value="red">Red</option>
          <option value="blue">Blue</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

<input type="button" id="btnAdd" value="Add New Row"></button>

Answer 2

您可以在附加$trNew元素之前对其进行修改。

在您的情况下：

$('select', $trNew).val($('select', $trLast).val());

Answer 3

我的解决方法是

$trNew.find('.bootstrap-select').next().remove();

具有选定下拉值的jQuery克隆表行

3 个答案: