從HTML表打印選定的行

Question

我有一個看起來像這個jsfiddle的表現在我需要實現打印所選行的功能。 可以通過單擊每行右側的復選框來選擇行。 請問有人可以告訴我如何完成它嗎？

我已經實現了全表打印功能

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

Answer 1

試試這段代碼......它不會創建一個彈出窗口，而是使用打印樣式表隱藏行（ 演示 ）

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();
});