Question

我已经尝试了将近一个小时，我似乎无法弄清楚我在哪里弄错了。我试图移动＆＃34; total_row＆＃34; to＆＃34; tfoot＆＃34;元件。那样它应该像这样讨论

<tfoot>
    <tr>
        <td>Total</td>
        <td>250</td>
        <td>100</td>
        <td>350</td>
    </tr>
<tfoot>

我的代码：

$cur_table = $("#wrap_table");

$total_row = $cur_table.find("tr:not(:eq(0)) td:contains('Total')").parent();

$total_row.parent().after('<tfoot></tfoot>');

$total_row.appendTo($cur_table.find("tfoot"));

谢谢！

Answer 1

尝试类似

的内容

$cur_table = $("#wrap_table");

$total_row = $cur_table.find("tr:not(:eq(0)) td:contains('Total')").parent();

var $tfoot = $('<tfoot></tfoot>').insertAfter($total_row.parent());

$total_row.appendTo($tfoot);

table {
  border-collapse: collapse
}
tbody {
  background-color: red;
}
tfoot {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="wrap_table">
  <tr>
    <td>test</td>
  </tr>
  <tr>
    <td>Total</td>
    <td>250</td>
    <td>100</td>
    <td>350</td>
  </tr>
</table>

Answer 2

试试这个：找到第一个td包含＆＃39; Total＆＃39; （删除单引号）并附加到tfoot

var $cur_table = $("#wrap_table");

var $total_row = $cur_table.find("td:contains(Total):first").closest('tr');

$total_row.appendTo($cur_table.find("tfoot"));

Answer 3

这可能是更好的主意。您应该将类或ID设置为总行，以便标记变为如下：

<tr class="total-row">
    <td>Total</td>
    <td>250</td>
    <td>100</td>
    <td>350</td>
</tr>

然后javascript可以是：

var $curTable = $("#wrap_table");
var $totalRow = $curTable.find(".total-row");

$('<tfoot></tfoot>').insertAfter($totalRow.parent()).append($totalRow);

这种方法有很大的好处。首先，您的JS代码不依赖于HTML中的文本。根据您的方法（通过单词＆＃34; Total＆＃34;选择），每次更改文本时都必须更改javacript。如果您本地化您的应用，它也将无效。

更不用说，通过课程名称，它的风格更加简单＆＃34; Total row＆＃34;个人风格。

使用appendTo从另一个容器移动元素

3 个答案: