js动态加载table，打印table里的内容以及解决打印后的问题

<body><div><div style="text-align:center;margin:10px">姓名：<input type="text" id="pt_search_name" name="pt_search_name" style="width:150px;height:30px;border:1px;" placeholder="请输入姓名" /><%--身份证号：<input type="text" id="pt_search_sfz" name="pt_search_sfz" style="width: 200px;height: 30px"/>--%>
            <button id="chaxun1" style="margin-left:20px;height:30px;">普通人才查询</button></div><div id="xinxi" style="margin:10px"></div></div>

//用来装打印的内容

<iframe id="iframe1" style="display: none"></iframe>

</body>

1.动态加载：

function loaddata(objs) {var datas=objs;var list= '';//列表
    var fragment= document.getElementById("xinxi");//定位到容器标签
    for(var i=0;i<datas.length;i++){list= document.createElement('div');//创建标签
        list.setAttribute("class","dayinbiao");// list.setAttribute("border",1);
        // list.setAttribute("align","center");
        // // list.setAttribute("text-align","center");
        // list.setAttribute("width","800px");
        // list.setAttribute("cellpadding","10px");
        // list.setAttribute("cellspacing","0px");
        //添加内容,设置属性
        list.innerHTML='<!--startprint--><table border="1" align="center" width="800px" cellspacing="0px" style="margin-top: 10px;"><caption style="font-size: 2em;">普通人才信息表</caption>' +'<tr><td>姓名</td><td >'+datas[i].name+'</td><td>身份证号</td><td colspan="5">'+datas[i].shenfenzheng+'</td></tr>' +'<tr><td>性别</td><td>'+datas[i].sex+'</td><td>出生日期</td><td>'+datas[i].birth+'</td><td>年龄</td><td>'+datas[i].age+'</td><td>民族</td><td>'+datas[i].minzu+'</td></tr>' +'<tr><td>婚姻状况</td><td>'+datas[i].hunyin+'</td><td>健康状况</td><td>'+datas[i].health+'</td><td>政治面貌</td><td>'+datas[i].political+'</td><td>身高</td><td>'+datas[i].height+'</td></tr>' +'<tr><td>毕业学校</td><td colspan="3">'+datas[i].school+'</td><td>所学专业</td><td colspan="3">'+datas[i].zuanye+'</td></tr>' +'<tr><td>籍贯</td><td colspan="3">'+datas[i].jiguan+'</td><td>毕业时间</td><td>'+datas[i].biye_time+'</td><td>学历</td><td>'+datas[i].xueli+'</td></tr>' +'<tr><td>联系</td><td>通讯地址</td><td colspan="3">'+datas[i].tongxun_dizhi+'</td><td>邮编</td><td colspan="2">'+datas[i].youbian+'</td></tr>' +'<tr><td>方式</td><td>手机号码</td><td colspan="3">'+datas[i].phone+'</td><td>宅电</td><td colspan="2">'+datas[i].home_phone+'</td></tr>' +'<tr><td>特长</td><td colspan="3">'+datas[i].techang+'</td><td>所获证书</td><td colspan="3">'+datas[i].zhengshu+'</td></tr>' +'<tr><td colspan="2">应聘岗位一</td><td colspan="2">'+datas[i].job1+'</td><td colspan="2">应聘岗位二</td><td colspan="2">'+datas[i].job2+'</td></tr>' +'<tr><td>应聘要求</td><td colspan="7">'+datas[i].yaoqiu+'</td></tr>' +'<tr><td>工作经历<span style="font-size: 0.6em;">(详细填写)</span></td><td colspan="7">'+datas[i].jingli+'</td></tr>' +'<tr><td>备注</td><td colspan="7">'+datas[i].beizhu+'</td></tr>' +'<tr><td>日期</td><td colspan="7">'+datas[i].dengji_time+'</td></tr></table><!--endprint-->'+'<button class="form1_dayin" style="width: 200px;height: 40px;margin-top: 10px;margin-left: 40%;">打印</button>';//添加子元素
        fragment.appendChild(list);}
}

2.点击打印按钮，实现打印：

$(document).on('click',".form1_dayin",function (e) {bdhtml=$(this).parents('.dayinbiao').html();//alert(bdhtml);
        sprnstr="<!--startprint-->"; //开始打印标识字符串有17个字符
        eprnstr="<!--endprint-->"; //结束打印标识字符串
        prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); //从开始打印标识之后的内容
        prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); //截取开始标识和结束标识之间的内容
       // 生成并打印ifrme
        var iframe= document.getElementById("iframe1");var iwindow= iframe.contentWindow;//获取iframe的window对象
        iwindow.document.body.innerText = "";//先清空iframe原先的内容
        iwindow.document.write(prnhtml);iwindow.print(); //调用浏览器的打印功能打印指定区域
        // // window.document.body.innerHTML=bdhtml; // 最后还原页面
        // window.location.reload()

})

js动态加载table，打印table里的内容以及解决打印后的问题相关推荐

JS动态加载脚本及对动态脚本内方法的调用
JS动态加载脚本及对动态脚本内方法的调用摘要 JS动态加载脚本及对动态脚本内方法的调用 JS 动态添加脚本按需加载首先我们需要一个被加载的js文件,我在一个固定文件夹下创建了一个package ...
转：JS动态加载JS
JS动态加载JS 1.直接document.write <script language="javascript"> document.write("< ...
js动态加载css文件和js文件的方法
今天研究了下js动态加载js文件和css文件的方法. 网上发现一个动态加载的方法.摘抄下来,方便自己以后使用 [code lang="html"] <html xmlns=& ...
python 爬虫+selenium 全自动化下载JS动态加载漫画
** python 爬虫+selenium 全自动化下载JS动态加载漫画最近刚学的python,代码可能并不规范,希望大家见谅! 爬取之前,我们首先需要做一些准备工作,因为很多网站都有反爬检索,为了 ...
php动态加载js,动态加载script文件的两种方法_javascript技巧
动态加载script到页面大约有俩方法第一种就是利用ajax方式,把script文件代码从后台加载到前台,然后对加载到的内容通过eval()执行代码.第二种是,动态创建一个script标签,设置其s ...
js动态载入css文件,原生JS动态加载JS、CSS文件及代码脚本(示例代码)
var DynamciLoadUtil = { // 动态加载外部js文件,并执行回调 loadJS: function(url, callback){ var script = document.c ...
Python《突破JS动态加载，成功爬取漫画》
今天就先挑战另外个动态加载的漫画网站,dmzj 漫画太多了,我们先挑选几个漫画下载试一试. 比如我们点击第一部漫画,进去后看看. 这里有很多章节,获得所有的章节这里不难. 接下来我们点击一个章节进去看 ...
js动态加载HTML元素时出现的无效的点击事件
项目中列表数据中隐藏着详情数据, 图一: 详情数据是:根据当前行的数据作为参数,通过ajax请求到后台返回的数据,再根据返回的结果动态生成HTML页面图二: js文件中的这些js的点击事件无效: j ...
vue.js 动态加载 html,Vue加载组件、动态加载组件的几种方式
什么是组件: 组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HT ...

js动态加载table，打印table里的内容以及解决打印后的问题

js动态加载table，打印table里的内容以及解决打印后的问题相关推荐

最新文章

热门文章