使用动态HTML页面在JavaScript中打开窗口
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了使用动态HTML页面在JavaScript中打开窗口，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4625字，纯文字阅读大概需要7分钟。
内容图文
如何在JavaScript中打开一个新窗口并插入HTML数据和动态内容值,最后打印打开的窗口页面.
>打开的窗口必须每行有2张卡片.(取决于隐藏表格),
>喜欢 – 打开的窗口将在我的隐藏表(tblPrintCards)中有1行或2行2个ID卡(HTML CODE)单行.
我的JavaScript代码：
function generateIDCardForPrint() {
/** get all data **/
var oTableExt = $('#tblPrintCards').dataTable();//hide jquery table have data//(photo base64 string,name)
var tablerows = $('#tblPrintCards tr').size();
/** Finding how many rows */
var tblTr = (tablerows / 2);
var t = document.createElement('table');
t.width = "100%";
var row = document.createElement('tr');
var td = document.createElement('td');
var ImageID = "data:image/jpg;base64," + aData[0][4];
var images = new Image();
images.src = ImageID;
images.id = "EmpImage";
$('#empImages').html(images);
$('#empImages img').css("height", "80px");
$('#empImages img').css("width", "80px");
$('#empName').text(aData[0][2]);//Hello HTML
var HtmlCode = $('#callID').html();//calling HTML Code static content
td.innerHTML = HtmlCode;
td.align = "left";
row.appendChild(td);
t.appendChild(row);
//Fetch element where table is created & append
var id = document.getElementById("tbl");
//adding table to html code.
tbl.appendChild(t);
alert(t.innerHTML)
var myWindow = window.open("", "MsgWindow", "width=1256, height=300");
myWindow.document.write(t.innerHTML);
myWindow.print();
}
我的HTML代码
<div id="idCard">
<div class="photoBox">
<img src="images/photo.jpg" alt=""></div>
<div class="clear"></div>
<div class="detailBox">
<label><strong>HERE Dynamic Name<strong></label>
</div>
<div class="clear">
<!-- idCard ends here -->
</div>
</div>
– 以上输出html(卡)将进入新窗口,基于否.隐藏表行,(如果2行数据1row卡,如果4行数据2行卡)
*, html, body { box-sizing:border-box; }
body { margin:50px;}
.clear { clear:both; }
#idCard {
width:310px;
padding:10px;
border:2px solid #000;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}
#idCard label {
display:block;
font-size:13px;
margin:0 0 5px 0;
}
#idCard .photoBox {
width:80px;
height:60px;
background:#306;
float:right;
border:0px solid red;
}
#idCard .detailBox {
width:150px;
height:60px;
margin:0px 0 0px 0;
border:0px solid red;
float:right;
padding:15px 0 0 0;
}<div id="idCard">
<div class="photoBox"><img src="images/photo.jpg" alt=""></div>
<div class="clear"></div>
<div class="detailBox">
<label><strong>Here Dynamic Name<strong></label>
</div>
<div class="clear"><!-- idCard ends here --></div>
</div>示例打开新的寡妇图像是：
解决方法:
在这个响应中我创建了一个用于测试的数据数组,因为aData数组对我们来说是未知的,所以数组初始化：
var aData =[];
// Just for test purpose, you can provide your own data
function initTestData(max){
var i = 0, emp = [];
for(i; i < max; i++){
emp[0] = "https://t1.gstatic.com/images?q=tbn:ANd9GcTGBDXFOEElnYoEZkYStOBIT_sogGr6zUG44opA4mq7Pf0SgevkGIMjSKmw6oktM4HK5NaKcWuQLA";
emp[1] = "Emp-"+i;
aData[i] = emp;
emp = [];
}
}
我修改了你的generateIDCardForPrint函数以适应你的要求：
function generateIDCardForPrint() {
// Card model holder
var idCardElement = $("#idCard");
// Data rows count
var tablerows = aData.length;//$('#tblPrintCards tr').size();
/** Finding how many rows */
var tblTr = (tablerows / 2);
var t = $('<table>');
t.css("width", "100%");
for(var i= 0; i < tblTr; i++){
var row = $('<tr>');
for( var j=0; j < 2; j++){
if(i * 2 + j < tablerows){
var td = $('<td>');
var ImageID = aData[i * 2 + j][0];
var images = new Image();
var empImages = $('.photoBox', idCardElement);
var empName = $('.detailBox > label > strong', idCardElement);
images.src = ImageID;
images.id = "EmpImage";
empImages.html(images);
empImages.find('img').each(function(a){$(this).css({height: "80px", width: "80px"})});
empName.text(aData[i * 2 + j][1]);//Hello HTML
var HtmlContent = idCardElement.html(),
Card = $('<div>').attr("id","idCard").html(HtmlContent);
td.html(Card);
td.css("align", "left");
row.append(td);
}
}
t.append(row);
}
var cssStyle= "*,body,html{box-sizing:border-box}body{margin:50px}.clear{clear:both}#idCard{width:310px;padding:10px;border:2px solid #000;box-sizing:border-box;font-family:Arial,Helvetica,sans-serif}#idCard label{display:block;font-size:13px;margin:0 0 5px}#idCard .photoBox{width:80px;height:60px;background:#306;float:right;border:0 solid red}#idCard .detailBox{width:150px;height:60px;margin:0;border:0 solid red;float:right;padding:15px 0 0}";
var myWindow = window.open("", "MsgWindow", "width=1256, height=300");
myWindow.document.write('<html><head><title>Print it!</title><style>'+cssStyle+'</style></head><body>');
myWindow.document.write('<table>'+t.html()+'</table>');
myWindow.document.write('</body></html>');
myWindow.print();
}
我想你可以让这个函数的代码更干净.
http://jsfiddle.net/vubkeb5w/3/
内容总结
以上是互联网集市为您收集整理的使用动态HTML页面在JavaScript中打开窗口全部内容，希望文章能够帮你解决使用动态HTML页面在JavaScript中打开窗口所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】