Question

我有一个包含多列的表，每列都有一个具有唯一ID的复选框。

我只想打印选定的列

Sr No   Items   Date         Discription    Quantity    No of Pkgs   Pkg Code
1       Mobile  1/12/2018    Mobile         10          20              12345    
2       Laptop  1/12/2018    Mobile         10          20              456789    
3       Tv      1/12/2018    Mobile         10          20              987654    
4       LCD     1/12/2018    Mobile         10          20              321654    
5       PC      1/12/2018    Mobile         10          20              987321

通过jQuery单击此按钮时，我要打印选定的列

<input type="button" id="Print_button" onclick='printChecked()' value="Print Selected Items"/>

function printChecked() {
  var items = document.getElementsByName('acs');
  var selectedItems = "";
  for (var i = 0; i < items.length; i++) {
    if (items[i].type == 'checkbox' && items[i].checked == true)
      selectedItems += items[i].value + "\n";
  }
  alert(selectedItems);
  window.print();
}

请给我这个或任何例子的信

Answer 1

首先，您做错了。

我将描述需要重点关注的步骤。

HTML -我们正在使用非打印类名称来隐藏打印中的元素，有关更多详细信息，请参见 CSS 部分。

<table>
    <thead>
        <tr class="no-print">
        <th>Sr No</th>   
        <th>Items</th>   
        <th>Date</th>   
        <th>Description</th>   
        <th>Quantity</th>   
        <th>No of Pkgs</th>   
        <th>Pkg Code</th>   
        </tr>
    </thead>
    <tbody>
        <tr class="no-print">
            <td><input type="checkbox" id="1" /></td>
            <td>Mobile</td>
            <td>1/12/2018</td>
            <td>Mobile</td>
            <td>10</td>
            <td>20</td>
            <td>12345</td>
        </tr>
        <tr class="no-print">
            <td><input type="checkbox" id="2" /></td>
            <td>Laptop</td>
            <td>1/12/2018</td>
            <td>Mobile</td>
            <td>10</td>
            <td>20</td>
            <td>12345</td>
        </tr>
        <tr class="no-print">
            <td><input type="checkbox" id="3" /></td>
            <td>Netbook</td>
            <td>1/12/2018</td>
            <td>Mobile</td>
            <td>10</td>
            <td>20</td>
            <td>12345</td>
        </tr>
    </tbody>
</table>
<input type="button" class="no-print" onclick='printChecked()' value="Print Selected Items" />

CSS -所有未打印类的元素都将被隐藏。

@media print {    
  .no-print, .no-print * {
    display: none !important;
  }
}

JS -进行了一些调整，我们只需检查选中了哪一行，然后从该行中删除无印刷类。

function printChecked() {
    const heading = document.querySelector('table > thead > tr');
    const items = document.querySelectorAll('table > tbody > tr');
    for (let i = 0; i < items.length; i++) {
       const tr = items[i];
       const input = tr.querySelector('input[type=checkbox]')
       const isChecked = input.checked

       if (isChecked) {
          heading.classList.remove('no-print');
          tr.classList.remove('no-print');
       }
    }
    window.print();
}

演示-https://scrimba.com/c/crgd7Tv

Answer 2

你是说

$("#printBut").on("click",function() {
  var $column = $("#productTable [type=checkbox]:checked");
  if ($column.length) {
    var $newTable = $("<table></table>");
    var $newHead = $("<thead/>").appendTo($newTable);
    var $newBody = $("<tbody/>").appendTo($newTable);
    var ths = $column.map(function() { return '<th>'+$(this).parent().text()+'</th>' }).get();
    $newHead.append('<tr>'+ths+'</tr>');
    var rows = $("#productTable tbody").find("tr").length;
    for (var i=0;i<rows;i++) {
      var $row = $("<tr/>");
      for (var j=0;j<$column.length;j++) {
        $row.append("<td/>");
      }
      $newBody.append($row);
    }
    $column.each(function(i) {
      var colIdx = $(this).parent().index()+1;
      var $row = $("<tr/>")
      $('table tr td:nth-child('+colIdx+')').each(function(){
        $("tr td:nth-child("+(i+1)+")",$newBody).html($(this).html())
      })
    });
    var $div = $("<div/>").append($newTable);
    console.log($div.html())
    /* uncomment this on your server 
    var w = window.open("","_newwin");
    if (w) {
      w.document.write('<body onload="window.focus(); window.print()">'+$div.html()+'</body>');
      w.document.close();
      setTimeout(function(){w.close();},10);
    }
    */
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="productTable">
  <thead>    
    <tr><th>Sr No<input type="checkbox" /></th><th>Items<input type="checkbox" /></th><th>Date<input type="checkbox" /></th><th><input type="checkbox" /></th><th>Description<input type="checkbox" /></th><th>Quantity<input type="checkbox" /></th><th>No of Pkgs<input type="checkbox" /></th><th> Pkg Code<input type="checkbox" /></th></tr>
  </thead>
  <tbody>    
    <tr><td>1</td><td>Mobile</td><td>1/12/2018</td><td>Mobile</td><td>10</td><td>20</td><td>12345</td></tr>    
    <tr><td>2</td><td>Laptop</td><td>1/12/2018</td><td>Mobile</td><td>10</td><td>20</td><td>456789</td></tr>    
    <tr><td>3</td><td>Tv</td><td>1/12/2018</td><td>Mobile</td><td>10</td><td>20</td><td>987654</td></tr>    
    <tr><td>4</td><td>LCD</td><td>1/12/2018</td><td>Mobile</td><td>10</td><td>20</td><td>321654</td></tr>    
    <tr><td>5</td><td>PC</td><td>1/12/2018</td><td>Mobile</td><td>10</td><td>20</td><td>987321</td></tr>  
  </tbody>
</table>
<button type="button" id="printBut">Print selected</button>

通过单击按钮打印表的选定复选框列数据

2 个答案: