Question

我想克隆＆＃34;＃＆＃34;和＆＃34;姓名＆＃34;列并将它们附加到表格外的某个div中（同时保持与thead和tbody完全相同的结构）。

No   Name         Data1         Data2         Data3
1   John Doe     Some data     Some data     Some data
2   John Doe     Some data     Some data     Some data
3   John Doe     Some data     Some data     Some data

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Data1</th>
      <th>Data2</th>
      <th>Data3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John Doe</td>
      <td>Some data</td>
      <td>Some data</td>
      <td>Some data</td>
    </tr>
    <tr>
      <td>2</td>
      <td>John Doe</td>
      <td>Some data</td>
      <td>Some data</td>
      <td>Some data</td>
    </tr>
    <tr>
      <td>3</td>
      <td>John Doe</td>
      <td>Some data</td>
      <td>Some data</td>
      <td>Some data</td>
    </tr>
  </tbody>
</table>

我想让它看起来像这样：

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John Doe</td>
    </tr>
    <tr>
      <td>2</td>
      <td>John Doe</td>
    </tr>
    <tr>
      <td>3</td>
      <td>John Doe</td>
    </tr>
  </tbody>
</table>

我目前的代码似乎不起作用（我只针对第一列进行了管理），但我无法使其工作超过第一列

$('table').clone().prependTo('.panel').find('th:not(:nth-child(1)), th:not(:nth-child(2)), td:not(:nth-child(1)), td:not(:nth-child(2))').remove();

Answer 1

我可以理解你想要做什么，你可以尝试这个解决方案..！

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Data1</th>
      <th>Data2</th>
      <th>Data3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John Doe</td>
      <td>Some data</td>
      <td>Some data</td>
      <td>Some data</td>
    </tr>
  </tbody>
</table>
<br /><br />

<div class="panel"></div>

＆＃13;

>>> print "%3f" % x
99999.454540
>>> print "%.3f" % x
99999.455

＆＃13;

Answer 2

您在:nth-child中提供多个find()选择器的方式是错。

试试这个： -

＆＃13;

$(function(){

  $('.panel').html( $('#tab').clone());
  
  $('.panel').find('th:not(:nth-child(1),:nth-child(2)), td:not(:nth-child(1),:nth-child(2))').remove();

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tab">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Data1</th>
      <th>Data2</th>
      <th>Data3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John Doe</td>
      <td>Some data</td>
      <td>Some data</td>
      <td>Some data</td>
    </tr>
    <tr>
      <td>2</td>
      <td>John Doe</td>
      <td>Some data</td>
      <td>Some data</td>
      <td>Some data</td>
    </tr>
    <tr>
      <td>3</td>
      <td>John Doe</td>
      <td>Some data</td>
      <td>Some data</td>
      <td>Some data</td>
    </tr>
  </tbody>
</table>
I want to make it look like this:

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John Doe</td>
    </tr>
    <tr>
      <td>2</td>
      <td>John Doe</td>
    </tr>
    <tr>
      <td>3</td>
      <td>John Doe</td>
    </tr>
  </tbody>
</table>
<strong>
<br><br>
Generated table here:-
</strong>
<div class="panel">
</div>

＆＃13;

jQuery如何查找/选择多个nth-childs

2 个答案: