javascript - 仅使用 jquery 导出选中的复选框

Question

我有功能导出和打印表。

像这样的代码片段

r  = 'myTable';
r = $("#" + r).clone();
$(".result").append(r);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable" border="1">
    <tr>
      <td><input type="checkbox"></td>  
      <td>A</td>
    </tr>
    <tr>
      <td><input type="checkbox"></td> 
      <td>B</td>
    </tr>
    <tr>
      <td><input type="checkbox"></td> 
      <td>C</td>
    </tr>
    <tr>
      <td><input type="checkbox"></td> 
      <td>D</td>
    </tr>
  
</table>

<h1>export result</h1>

<div class="result">
  
</div>

如何克隆表以仅导出选定的复选框？

标签： javascriptjqueryhtml

Answer 1

可以从克隆中删除（或隐藏）未选中的行，例如

r  = 'myTable';
r = $("#" + r).clone();
r.find(':checkbox:not(:checked)').closest('tr').remove();// or hide()
$(".result").append(r);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="display:none">
<table id="myTable" border="1">
    <tr>
      <td><input type="checkbox" checked></td>  
      <td>A</td>
    </tr>
    <tr>
      <td><input type="checkbox"></td> 
      <td>B</td>
    </tr>
    <tr>
      <td><input type="checkbox" checked></td> 
      <td>C</td>
    </tr>
    <tr>
      <td><input type="checkbox"></td> 
      <td>D</td>
    </tr>
  
</table>
</div>
<h1>export result</h1>

<div class="result">
  
</div>