<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0051)http://localhost:8080/MDITIP/printOutContent.action -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>打印</title>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<style>
h4 {
font-size: 23px;
font-weight: 400;
width: 50%;
text-align: center;
margin: 0 auto;
}
em {
font-style: normal;
}
b {
margin-left: 20px;
}
input {
border: 0;
outline: none;
cursor: pointer;
}
span {
width: 30%;
float: right;
}
table {
width: 100%;
border: 1px solid #222;
border-top: none;
border-bottom: none;
}
td {
width: 15%;
height: 44px;
border: 1px solid #222;
text-align: center;
}
#headerInfo td {
width: 15%;
height: 44px;
border: 1px solid #222;
text-align: center;
/* word-wrap: break-word;
word-break: normal; */
page-break-after: always;
}
.pageBreak {
page-break-after: always;
}
.noPrint {
display: none;
}
@media print {
.pageBreak {
page-break-after: always;
}
.noPrint {
display: none;
}
}
/* .tablehtml{
width: 100%;
height: 2000px;
background: rgb(221, 161, 161);
} */
</style>
</head>
<body>
<div id="print-content">
<div class="header">
<h4>长阳土家族自治县职业教育中心学生学籍卡</h4>
</div>
<p>
<b><em>经办人:</em><input type="text" /></b>
<span>打印日期:</span>
</p>
<!-- 页面记录信息 -->
<table cellpadding="0" cellspacing="0">
<tr>
<td>姓名</td>
<td></td>
<td>性别</td>
<td></td>
<td>出生日期</td>
<td></td>
<td rowspan="3">照片</td>
</tr>
<tr>
<td>民族</td>
<td></td>
<td>政治面貌</td>
<td></td>
<td>班级</td>
<td></td>
</tr>
<tr>
<td>学号</td>
<td></td>
<td>学制</td>
<td></td>
<td>学籍号</td>
<td></td>
</tr>
<tr>
<td>年级</td>
<td></td>
<td>专业</td>
<td></td>
<td>身份证号</td>
<td colspan="2"></td>
</tr>
<tr>
<td>入学年月</td>
<td></td>
<td>入学方式</td>
<td></td>
<td>学习形式</td>
<td colspan="2"></td>
</tr>
<tr>
<td>家庭住址</td>
<td colspan="3"></td>
<td>毕业时间</td>
<td colspan="2">
<input type="text" style="width: 90%" />
</td>
</tr>
<tr>
<td>异动情况</td>
<td colspan="7"><input type="text" style="width: 90%" /></td>
</tr>
<tr>
<td colspan="8">学业成绩</td>
</tr>
<tr>
<td>学期</td>
<td>课程名称</td>
<td>成绩</td>
<td>课程名称</td>
<td>成绩</td>
<td>课程名称</td>
<td>成绩</td>
</tr>
</table>
<div class="tablehtml"></div>
</div>
</body>
</html>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script>
$(window).load(function () {
var listData = [
{
trData: [
{
tdData: [
{ text: "语文", name: "100" },
{ text: "数学", name: "936" },
{ text: "物理", name: "78" },
],
},
{
tdData: [
{ text: "语文", name: "10" },
{ text: "数2学", name: "6" },
{ text: "物2理", name: "78" },
],
},
{
tdData: [
{ text: "语3文", name: "120" },
{ text: "数3学", name: "6" },
{ text: "物3理", name: "78" },
],
},
],
},
{
trData: [
{
tdData: [
{ text: "语文", name: "100" },
{ text: "数学", name: "936" },
{ text: "物理", name: "78" },
],
},
{
tdData: [
{ text: "语文", name: "10" },
{ text: "数2学", name: "6" },
{ text: "物2理", name: "78" },
],
},
{
tdData: [
{ text: "语3文", name: "120" },
{ text: "数3学", name: "6" },
{ text: "物3理", name: "78" },
],
},
],
},
];
console.log("数据", listData);
// 有六个学期
var tableHtml = "";
var str = "";
var std = "";
for (var j = 0; j < listData.length; j++) {
var str = "";
var std = "";
tableHtml +=
"<table cellpadding='0' cellspacing='0' id='table" + j + "'>";
// 循环其五行tr
for (var i = 0; i < listData[j].trData.length; i++) {
// console.log("td",listData[j].trData[i].tdData,name)
std = "";
str += "<tr>";
console.log(listData[j].trData[i].tdData.length,"22222")
for (var k = 0; k < listData[j].trData[i].tdData.length; k++) {
// console.log("td书",listData[j].trData[i].tdData[k].name)
// std +=`<td rowspan='5'>第${j}学期</td>`
if (k == 0) {
if (i == 0) {
std += `<td rowspan='5'>第${j + 1}学期</td>`;
}
}
// else {
// if (k % 2 == 0) {
// console.log("td书3333",listData[j].trData[i].tdData[k].name)
// std += `<td>${listData[j].trData[i].tdData[k].name}</td>`;
// } else {
// std += `<td>${listData[j].trData[i].tdData[k].text}</td>`;
// }
// // if(k==2){
// // std +=`<td>${listData[j].text}</td>`
// // }
// // std +=`<td></td>`
// }
std += `<td>${listData[j].trData[i].tdData[k].text}</td><td>${listData[j].trData[i].tdData[k].name}</td>`;
// if (k % 2 == 0) {
// console.log("kkkk",k)
// console.log("td书3333",listData[j].trData[i].tdData[k].name)
// std += `<td>${listData[j].trData[i].tdData[k].text}</td><td>${listData[j].trData[i].tdData[k].name}</td>`;
// } else {
// std += `<td>${listData[j].trData[i].tdData[k].name}</td>`;
// console.log("4455444",listData[j].trData[i].tdData[k].text)
// }
}
str += std + "</tr>";
}
tableHtml += str + "</table>";
}
$(".tablehtml").html(tableHtml);
var yiH = $("#table0").height();
var erH = $("#table1").height();
var sanH = $("#table2").height();
var siH = $("#table3").height();
var wuH = $("#table4").height();
var liuH = $("#table5").height();
var siNumH = erH + sanH + siH;
// erDom.classList.add("pageBreak")
$("#table1").addClass("pageBreak");
// removeClass()
if (yiH > 300) {
$("#table0").addClass("pageBreak");
$("#table5").addClass("pageBreak");
}
if (erH > 300) {
$("#table0").addClass("pageBreak");
$("#table1").removeClass("pageBreak");
}
if (sanH > 300) {
$("#table1").removeClass("pageBreak");
$("#table2").addClass("pageBreak");
$("#table3").removeClass("pageBreak");
$("#table4").removeClass("pageBreak");
}
if (siH > 400) {
$("#table3").addClass("pageBreak");
$("#table5").removeClass("pageBreak");
$("#table4").removeClass("pageBreak");
}
if (wuH > 400) {
$("#table4").addClass("pageBreak");
liuDom.removeClass("pageBreak");
}
if (liuH > 400) {
$("#table4").addClass("pageBreak");
}
if (yiH + erH > 200) {
$("#table1").addClass("pageBreak");
$("#table2").removeClass("pageBreak");
$("#table3").removeClass("pageBreak");
$("#table4").removeClass("pageBreak");
$("#table5").removeClass("pageBreak");
}
if (erH + sanH > 600) {
$("#table2").addClass("pageBreak");
$("#table3").removeClass("pageBreak");
$("#table4").removeClass("pageBreak");
$("#table5").removeClass("pageBreak");
}
if (sanH + siH > 700) {
// siDom.classList.add("pageBreak")
$("#table4").removeClass("pageBreak");
$("#table5").removeClass("pageBreak");
}
if (siH + wuH > 700) {
$("#table4").addClass("pageBreak");
$("#table5").removeClass("pageBreak");
}
if (erH + sanH + siH > 700) {
$("#table2").addClass("pageBreak");
$("#table3").removeClass("pageBreak");
$("#table4").classList.add("pageBreak");
}
});
</script>
纯js 渲染给表格合并
最新推荐文章于 2023-08-08 10:09:58 发布