Question

我是stackoverflow的新手，我正面临一些问题，我正在研究两个表。它有像右按钮将行移动到下一个表格现在实际问题是我正在尝试制作但它不起作用。

请帮帮我。

$(function() {
  $(document).on("click", "#submit", function() {
    var getSelectedRows = $(".src-table").parents("tr");
    $(".target-table tbody").append(getSelectedRows);
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h3>
  Source table
</h3>
<table class="src-table">
  <tr>
    <th>Select</th>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
<br>
<input type="button" value="Submit" id="submit">

<h3>
  Target table
</h3>
<table class="target-table">
  <tr>
    <th>Select</th>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
</table>

Answer 1

问题是因为你的选择器不正确，因此getSelectedRows拥有一个空的jQuery对象。

您根本不需要使用parents()，因为tr是您选择的表格的子项，因此只需$(".src-table tr");即可。

您应该注意我向表中添加了<thead />元素，否则您最终会重复标题行。试试这个：

$(function() {
  $(document).on("click", "#submit", function() {
    var getSelectedRows = $(".src-table tbody tr");
    $(".target-table tbody").append(getSelectedRows);
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Source table</h3>
<table class="src-table">
  <thead>
    <tr>
      <th>Select</th>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
  </tbody>
</table>
<br>
<input type="button" value="Submit" id="submit">

<h3>Target table</h3>
<table class="target-table">
  <thead>
    <tr>
      <th>Select</th>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

Answer 2

替换var getSelectedRows = $(".src-table").parents("tr");

var getSelectedRows = $(".src-table").find("tr");为我工作。

这是jsFiddle

.parents()适用于祖先元素。而find()适用于后代元素。您的代码tr是.src-table的孩子，因此您应该使用$(".src-table").find("tr");或$(".src-table tr");

给定一个表示一组DOM元素的jQuery对象， .parents（）方法允许我们搜索这些的祖先 DOM树中的元素并从中构造一个新的jQuery对象从直接父母订购的匹配元素;要素从最近的父级到外部的父级按顺序返回。什么时候多个DOM元素都在原始集合中，结果集合将是与原始元素的顺序相反，具有重复除去。

Answer 3

您可以选择所有TR元素 $（“。src-table tr”）并附加到目标表。在您的函数中，没有 tbody

$(function() {
  $('#submit').on('click', function() {
    var getSelectedRows = $(".src-table tr");
    $(".target-table").append(getSelectedRows);
  })
});

如何通过选择一行将一个表的一行移动到另一个表，然后单击以使用jQuery移动它？

3 个答案: