Question

当前，我具有以下表结构：

<tr>
    <th></th>
    <th class="afterThat"></th>
    <th></th>
    <th></th>
</tr>

我想做这样的事情

<tr>
    <th></th>
    <th class="afterThat"></th>
</tr>
<tr>
    <th></th>
    <th></th>
</tr>

为此，我正在使用以下jQuery，但未添加此</tr><tr>。我可以看到它像这样添加。 <tr></tr>！

我在做错什么吗？或者该怎么做？

$(".afterThat").after("</tr><tr>");

更新：

这是我现在拥有的HTML代码：

<table class="footable table table-stripped toggle-arrow-tiny transaction-table">
<thead>        
    <tr class="footable-pagesize">
        <th align="left">Show</th>
        <th class="afterThat">
            <select id="transaction-per-page" class="float-left">
                <option value="5">50 Per Page</option>
                <option value="10">100 Per Page</option>
                <option value="20">150 Per Page</option>
                <option value="50">200 Per Page</option>
            </select>
        </th>            
        <th data-breakpoints="xs" width="">
            <div id="reportrange"  class="primary-icon dateRangePicker" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
                <i class="fa fa-calendar"></i>&nbsp;
                <span></span> <i class="fa fa-caret-down"></i>
            </div>
        </th>
        <th data-breakpoints="xs" class="footable-expor-pdf" align="right">
            <a href="" class="primary-icon">  <i class="fas fa-file-pdf fa-2x icon"> </i></a>
            &nbsp;
            <a href="" class="primary-icon">  <i class="fas fa-file-excel fa-2x icon"> </i></a>
        </th>
    </tr>
    <tr>
        <th data-breakpoints="xs">Date</th>
        <th data-breakpoints="xs">Description</th>
        <th>Transaction Id</th>
        <th>Amount</th>
    </tr>
</thead>
</table>

Answer 1

您需要创建一个新的<tr>并在其中添加两个<th>：

在第一个<tr>之后插入新的tr.after('<tr></tr>');
选择要移动的<th>：tr.find('th:nth-child(n+3)')
将它们附加到新创建的<tr>：.appendTo(tr.next())

let tr = $('tr');
tr.after('<tr></tr>');
tr.find('th:nth-child(n+3)').appendTo(tr.next());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>first</th>
    <th class="afterThat">second</th>
    <th>third</th>
    <th>fourth</th>
  </tr>
</table>

查看HTML之后，您应该使用以下代码：

let breakingTr = $('th.afterThat');
breakingTr.parent().after('<tr></tr>');
breakingTr.nextAll().appendTo(breakingTr.parent().next());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="footable table table-stripped toggle-arrow-tiny transaction-table">
  <thead>
    <tr class="footable-pagesize">
      <th align="left">Show</th>
      <th class="afterThat">
        <select id="transaction-per-page" class="float-left">
          <option value="5">50 Per Page</option>
          <option value="10">100 Per Page</option>
          <option value="20">150 Per Page</option>
          <option value="50">200 Per Page</option>
        </select>
      </th>
      <th data-breakpoints="xs" width="">
        <div id="reportrange" class="primary-icon dateRangePicker" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
          <i class="fa fa-calendar"></i>&nbsp;
          <span></span> <i class="fa fa-caret-down"></i>
        </div>
      </th>
      <th data-breakpoints="xs" class="footable-expor-pdf" align="right">
        <a href="" class="primary-icon"> <i class="fas fa-file-pdf fa-2x icon"> </i></a>
        &nbsp;
        <a href="" class="primary-icon"> <i class="fas fa-file-excel fa-2x icon"> </i></a>
      </th>
    </tr>
    <tr>
      <th data-breakpoints="xs">Date</th>
      <th data-breakpoints="xs">Description</th>
      <th>Transaction Id</th>
      <th>Amount</th>
    </tr>
  </thead>
</table>

为什么jQuery append无法按预期工作

1 个答案: