Question

我的桌子看起来像jsfiddle 现在我需要实现打印所选行的功能。可以通过单击每行右侧的复选框来选择行。有人可以告诉我如何完成它吗？

我已经使用

实现了全表打印功能

var divToPrint=document.getElementById("pretazna");
   newWin= window.open("");
   newWin.document.write(divToPrint.outerHTML);
   newWin.print();
   newWin.close();

Answer 1

尝试此代码...它不会创建弹出窗口，而是使用打印样式表隐藏行（demo）

CSS

@media print {
  #print, tfoot, tbody tr:not(.printme) {
    display: none !important;
  }
}

的Javascript

function matches(el, selector) {
  // https://developer.mozilla.org/en-US/docs/Web/API/Element/matches
  var matches = document.querySelectorAll(selector),
    i = matches.length;
  while (--i >= 0 && matches.item(i) !== el) {}
  return i > -1;
}

function closest(el, selector) {
  while (el && !matches(el, selector)) {
    el = el.parentNode;
  }
  return matches(el, selector) ? el : null;
}

document.querySelector('table').addEventListener('change', function(event) {
  var target = event.target;
  closest(target, 'tr').classList[target.checked ? 'add' : 'remove']('printme');
})

document.querySelector("#print").addEventListener('click', function() {
  window.print();
});

从HTML表打印选定的行

1 个答案: