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="请输入姓名" />
            <%--身份证号:--%>
            <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>

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='' +
            '' +
            '' +
            '' +
            '' +
            '' +
            '' +
            '' +
            '' +
            '' +
            '' +
            '' +
            '' +
            '
普通人才信息表
姓名'+datas[i].name+'身份证号'+datas[i].shenfenzheng+'
性别'+datas[i].sex+'出生日期'+datas[i].birth+'年龄'+datas[i].age+'民族'+datas[i].minzu+'
婚姻状况'+datas[i].hunyin+'健康状况'+datas[i].health+'政治面貌'+datas[i].political+'身高'+datas[i].height+'
毕业学校'+datas[i].school+'所学专业'+datas[i].zuanye+'
籍贯'+datas[i].jiguan+'毕业时间'+datas[i].biye_time+'学历'+datas[i].xueli+'
联系通讯地址'+datas[i].tongxun_dizhi+'邮编'+datas[i].youbian+'
方式手机号码'+datas[i].phone+'宅电'+datas[i].home_phone+'
特长'+datas[i].techang+'所获证书'+datas[i].zhengshu+'
应聘岗位一'+datas[i].job1+'应聘岗位二'+datas[i].job2+'
应聘要求'+datas[i].yaoqiu+'
工作经历(详细填写)'+datas[i].jingli+'
备注'+datas[i].beizhu+'
日期'+datas[i].dengji_time+'
'
+ ''; //添加子元素 fragment.appendChild(list); } }
2.点击打印按钮,实现打印:

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

})

你可能感兴趣的:(javaweb)