淘先锋技术网

首页 1 2 3 4 5 6 7
JavaScript是目前网页制作中最为重要的编程语言之一。它能够使网页实现更灵活和交互性的操作,非常方便和实用。今天我们要介绍的是Javascript打印表格。表格是网页中主要的展示元素之一,同时也经常用于统计数据、排版等。如果我们需要将表格打印出来,那么该如何实现呢? 在Javascript中,我们可以通过如下代码将表格进行打印:
function printTable(tableID) {
var mytable = document.getElementById(tableID);
var newWin = window.open('', 'Print-Window');
newWin.document.open();
newWin.document.write(''+mytable.outerHTML+'
'); newWin.document.close(); setTimeout(function(){newWin.close();},10); }
该函数接收表格ID作为参数,然后获取该表格的DOM元素,并在新开的窗口中将表格内容输出并调用print()方法进行打印。为了防止出现打印页面错乱的问题,我们使用了setTimeout方法来关闭打印窗口。 下面是一个简单的表格示例:
姓名年龄性别
Tom20
Mary25
Jack30
我们将该表格传入printTable函数中进行打印:
点击该按钮即可完成表格的打印。 除了打印整个表格之外,我们还可以选择打印表格的某一部分内容。例如,我们只想打印表头和第一行,可以通过如下代码来实现:
function printPartTable(tableID) {
var mytable = document.getElementById(tableID);
var newWin = window.open('', 'Print-Window');
newWin.document.open();
newWin.document.write('
'+mytable.getElementsByTagName('thead')[0].innerHTML+''+mytable.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[0].innerHTML+'
'); newWin.document.close(); setTimeout(function(){newWin.close();},10); }我们首先获取表格的thead和tbody元素,然后将它们拼接到打印页面中,同时给表格和单元格增加了边框样式以方便查看。同样地,我们将该函数注册到按钮的点击事件中即可。
Javascript打印表格并不是什么复杂的操作,只需要掌握一些基本的知识点即可。通过本文的介绍,相信您已经可以灵活地运用Javascript对表格进行打印了。