在实际项目中经常会遇到合并表格的情形,现在我将自己合并的方法写出来,供大家教参一下,顺便自己也作个备忘。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>评价信息详情</title> <script type="text/javascript"> function fixRowspan() { var tb = document.getElementById("appraiseDetailBean"); var row_span_num = 1; var first_row_title = ""; var first_row_obj; for ( var i = 1; i < tb.rows.length - 1; i++) { var first_new_row_title = tb.rows[i].cells[1].innerHTML; if (first_row_title != "" && first_row_title == first_new_row_title) { tb.rows[i].deleteCell(1); row_span_num++; if (i == tb.rows.length - 2) { first_row_obj.setAttribute("rowSpan", row_span_num); //first_row_obj.innerHTML = getFontVertical(first_row_title); first_row_obj.innerHTML = first_row_title.replace("/", "<br/>"); } } else { if (first_row_title != "") { first_row_obj.setAttribute("rowSpan", row_span_num); //first_row_obj.innerHTML = getFontVertical(first_row_title); first_row_obj.innerHTML = first_row_title.replace("/", "<br/>"); row_span_num = 1; } first_row_obj = tb.rows[i].cells[1]; first_row_title = first_new_row_title; } } row_span_num = 1; first_row_title = ""; first_row_obj = null; for ( var i = 1; i < tb.rows.length - 1; i++) { var first_new_row_title = tb.rows[i].cells[0].innerHTML; if (first_row_title != "" && first_row_title == first_new_row_title) { tb.rows[i].deleteCell(0); row_span_num++; if (i == tb.rows.length - 2) { first_row_obj.setAttribute("rowSpan", row_span_num); //first_row_obj.innerHTML = getFontVertical(first_row_title); first_row_obj.innerHTML = first_row_title.replace("/", "<br/>"); } } else { if (first_row_title != "") { first_row_obj.setAttribute("rowSpan", row_span_num); //first_row_obj.innerHTML = getFontVertical(first_row_title); first_row_obj.innerHTML = first_row_title.replace("/", "<br/>"); row_span_num = 1; } first_row_obj = tb.rows[i].cells[0]; first_row_title = first_new_row_title; } } } function clearTrStyle() { $("td").each(function() { $(this).removeClass("over"); }); } $(document).ready(function() { $("tr").mousedown(function() { //如果鼠标移到class为stripe的表格的tr上时,执行函数 clearTrStyle(); $(this).find("td").each(function() { if ($(this).attr("rowSpan") == 1) { $(this).addClass("over"); } }); }); }); </script> </head> <body onload="fixRowspan()"> <form action="${pageContext.request.contextPath}/XXXX" method="post" target="mainWorkArea"> <fieldset> <legend>教师评价</legend> <div id="content"> <display:table name="${appraiseDetailBeanList}" id="appraiseDetailBean"> <display:column property="appraiseFirstName" title="维 度"></display:column> <display:column property="appraiseSecondName" title="要 素"></display:column> <display:column property="appraiseThirdName" title="关 键 表 现"></display:column> <display:column property="appraiseWeight" title="权重"></display:column> <display:column title="评 价 标 准"> <input type="hidden" name="appraiseItemIndex${appraiseDetailBean_rowNum}" value="${ appraiseDetailBean.appraiseItemIndex}"/> <input type="hidden" name="appraiseIndex" value="${appraiseIndex}"/> <input type="hidden" name="appraiseType" value="${appraiseType}"/> <input type="hidden" id="studentInput" name="studentNo" value="${studentNo}"/> <input type="hidden" name="appraiseWeight${appraiseDetailBean_rowNum}" value="${ appraiseDetailBean.appraiseWeight}"/> <c:forTokens items="${appraiseDetailBean.appraiseOption}" var="oneOption" delims="," varStatus="index"> <input type="radio" id="appraiseResult${appraiseDetailBean_rowNum}_${index.index}" name="appraiseResult${appraiseDetailBean_rowNum}" value="${oneOption}"/> <label for="appraiseResult${appraiseDetailBean_rowNum}_${index.index}"> ${optionMap[oneOption] } </label> </c:forTokens> </display:column> <%-- <display:caption>${appraiseDetailBean.appraiseName}</display:caption> --%> </display:table> </div> </fieldset> </form> </body> </html>
运行效果为:
附:页面解析后的源码为:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <script type="text/javascript" src="/javascript/jquery-1.4.2.js"></script> <script type="text/javascript" src="/javascript/managerutil.js"></script> <link rel="stylesheet" href="/css/com.css" /> <title>评价信息详情</title> <script type="text/javascript"> function fixRowspan() { var tb = document.getElementById("appraiseDetailBean"); var row_span_num = 1; var first_row_title = ""; var first_row_obj; for ( var i = 1; i < tb.rows.length - 1; i++) { var first_new_row_title = tb.rows[i].cells[1].innerHTML; if (first_row_title != "" && first_row_title == first_new_row_title) { tb.rows[i].deleteCell(1); row_span_num++; if (i == tb.rows.length - 2) { first_row_obj.setAttribute("rowSpan", row_span_num); //first_row_obj.innerHTML = getFontVertical(first_row_title); first_row_obj.innerHTML = first_row_title.replace("/", "<br/>"); } } else { if (first_row_title != "") { first_row_obj.setAttribute("rowSpan", row_span_num); //first_row_obj.innerHTML = getFontVertical(first_row_title); first_row_obj.innerHTML = first_row_title.replace("/", "<br/>"); row_span_num = 1; } first_row_obj = tb.rows[i].cells[1]; first_row_title = first_new_row_title; } } row_span_num = 1; first_row_title = ""; first_row_obj = null; for ( var i = 1; i < tb.rows.length - 1; i++) { var first_new_row_title = tb.rows[i].cells[0].innerHTML; if (first_row_title != "" && first_row_title == first_new_row_title) { tb.rows[i].deleteCell(0); row_span_num++; if (i == tb.rows.length - 2) { first_row_obj.setAttribute("rowSpan", row_span_num); //first_row_obj.innerHTML = getFontVertical(first_row_title); first_row_obj.innerHTML = first_row_title.replace("/", "<br/>"); } } else { if (first_row_title != "") { first_row_obj.setAttribute("rowSpan", row_span_num); //first_row_obj.innerHTML = getFontVertical(first_row_title); first_row_obj.innerHTML = first_row_title.replace("/", "<br/>"); row_span_num = 1; } first_row_obj = tb.rows[i].cells[0]; first_row_title = first_new_row_title; } } } function clearTrStyle() { $("td").each(function() { $(this).removeClass("over"); }); } $(document).ready(function() { $("tr").mousedown(function() { //如果鼠标移到class为stripe的表格的tr上时,执行函数 clearTrStyle(); $(this).find("td").each(function() { if ($(this).attr("rowSpan") == 1) { $(this).addClass("over"); } }); }); }); </script> </head> <body onload="fixRowspan()"> <form action="XXX" method="post" target="mainWorkArea"> <fieldset> <legend>教师评价</legend> <div id="content"> <table id="appraiseDetailBean"> <caption>上学期-评价</caption> <thead> <tr> <th>维 度</th> <th>要 素</th> <th>关 键 表 现</th> <th>权重</th> <th>评 价 标 准</th> </tr> </thead> <tbody> <tr class="odd"> <td>运动与健康</td> <td>习惯与技能</td> <td>热爱体育运动,养成锻炼习惯,“两操”出勤率高,动作规范,效果好</td> <td>3.00</td> <td> <input type="hidden" name="appraiseItemIndex1" value="68086a63-3e1a-4fba-bb41-d7b32d213768"></input> <input type="hidden" name="appraiseIndex" value="3b3ba937-6fe8-4d55-a997-600ac739735e"></input> <input type="hidden" name="appraiseType" value="teacher"></input> <input type="hidden" id="studentInput" name="studentNo" value=""></input> <input type="hidden" name="appraiseWeight1" value="3.00"></input> <input type="radio" id="appraiseResult1_0" name="appraiseResult1" value="A"></input> <label for="appraiseResult1_0">优</label> <input type="radio" id="appraiseResult1_1" name="appraiseResult1" value="B"></input> <label for="appraiseResult1_1">好</label> <input type="radio" id="appraiseResult1_2" name="appraiseResult1" value="C"></input> <label for="appraiseResult1_2">良</label> <input type="radio" id="appraiseResult1_3" name="appraiseResult1" value="D"></input> <label for="appraiseResult1_3">差</label> <input type="radio" id="appraiseResult1_4" name="appraiseResult1" value="E"></input> <label for="appraiseResult1_4">极差</label> </td> </tr> <tr class="even"> <td>运动与健康</td> <td>习惯与技能</td> <td>有一定的体育爱好或特长,积极参加各项活动和竞赛,运动会主动参加</td> <td>4.00</td> <td> <input type="hidden" name="appraiseItemIndex2" value="68086a63-3e1a-4fba-bb41-d7b32d213768"></input> <input type="hidden" name="appraiseIndex" value="3b3ba937-6fe8-4d55-a997-600ac739735e"></input> <input type="hidden" name="appraiseType" value="teacher"></input> <input type="hidden" id="studentInput" name="studentNo" value=""></input> <input type="hidden" name="appraiseWeight2" value="4.00"></input> <input type="radio" id="appraiseResult2_0" name="appraiseResult2" value="A"></input> <label for="appraiseResult2_0">优</label> <input type="radio" id="appraiseResult2_1" name="appraiseResult2" value="B"></input> <label for="appraiseResult2_1">好</label> <input type="radio" id="appraiseResult2_2" name="appraiseResult2" value="C"></input> <label for="appraiseResult2_2">良</label> <input type="radio" id="appraiseResult2_3" name="appraiseResult2" value="D"></input> <label for="appraiseResult2_3">差</label> <input type="radio" id="appraiseResult2_4" name="appraiseResult2" value="E"></input> <label for="appraiseResult2_4">极差</label> </td> </tr> <tr class="odd"> <td>运动与健康</td> <td>习惯与技能</td> <td>具备一定的运动技能,体育课考查情况好</td> <td>3.00</td> <td> <input type="hidden" name="appraiseItemIndex3" value="68086a63-3e1a-4fba-bb41-d7b32d213768"></input> <input type="hidden" name="appraiseIndex" value="3b3ba937-6fe8-4d55-a997-600ac739735e"></input> <input type="hidden" name="appraiseType" value="teacher"></input> <input type="hidden" id="studentInput" name="studentNo" value=""></input> <input type="hidden" name="appraiseWeight3" value="3.00"></input> <input type="radio" id="appraiseResult3_0" name="appraiseResult3" value="A"></input> <label for="appraiseResult3_0">优</label> <input type="radio" id="appraiseResult3_1" name="appraiseResult3" value="B"></input> <label for="appraiseResult3_1">好</label> <input type="radio" id="appraiseResult3_2" name="appraiseResult3" value="C"></input> <label for="appraiseResult3_2">良</label> <input type="radio" id="appraiseResult3_3" name="appraiseResult3" value="D"></input> <label for="appraiseResult3_3">差</label> <input type="radio" id="appraiseResult3_4" name="appraiseResult3" value="E"></input> <label for="appraiseResult3_4">极差</label> </td> </tr> <tr class="even"> <td>运动与健康</td> <td>身心健康状况</td> <td>心理健康,能控制和调节自己的情绪,能正确的评价自我,积极向上</td> <td>2.00</td> <td> <input type="hidden" name="appraiseItemIndex4" value="68086a63-3e1a-4fba-bb41-d7b32d213768"></input> <input type="hidden" name="appraiseIndex" value="3b3ba937-6fe8-4d55-a997-600ac739735e"></input> <input type="hidden" name="appraiseType" value="teacher"></input> <input type="hidden" id="studentInput" name="studentNo" value=""></input> <input type="hidden" name="appraiseWeight4" value="2.00"></input> <input type="radio" id="appraiseResult4_0" name="appraiseResult4" value="A"></input> <label for="appraiseResult4_0">优</label> <input type="radio" id="appraiseResult4_1" name="appraiseResult4" value="B"></input> <label for="appraiseResult4_1">好</label> <input type="radio" id="appraiseResult4_2" name="appraiseResult4" value="C"></input> <label for="appraiseResult4_2">良</label> <input type="radio" id="appraiseResult4_3" name="appraiseResult4" value="D"></input> <label for="appraiseResult4_3">差</label> <input type="radio" id="appraiseResult4_4" name="appraiseResult4" value="E"></input> <label for="appraiseResult4_4">极差</label> </td> </tr> <tr class="odd"> <td>运动与健康</td> <td>身心健康状况</td> <td>体育考试合格以上,有良好的身体素质,能正常参加学习劳动</td> <td>3.00</td> <td> <input type="hidden" name="appraiseItemIndex5" value="68086a63-3e1a-4fba-bb41-d7b32d213768"></input> <input type="hidden" name="appraiseIndex" value="3b3ba937-6fe8-4d55-a997-600ac739735e"></input> <input type="hidden" name="appraiseType" value="teacher"></input> <input type="hidden" id="studentInput" name="studentNo" value=""></input> <input type="hidden" name="appraiseWeight5" value="3.00"></input> <input type="radio" id="appraiseResult5_0" name="appraiseResult5" value="A"></input> <label for="appraiseResult5_0">优</label> <input type="radio" id="appraiseResult5_1" name="appraiseResult5" value="B"></input> <label for="appraiseResult5_1">好</label> <input type="radio" id="appraiseResult5_2" name="appraiseResult5" value="C"></input> <label for="appraiseResult5_2">良</label> <input type="radio" id="appraiseResult5_3" name="appraiseResult5" value="D"></input> <label for="appraiseResult5_3">差</label> <input type="radio" id="appraiseResult5_4" name="appraiseResult5" value="E"></input> <label for="appraiseResult5_4">极差</label> </td> </tr> <tr class="even"> <td>运动与健康</td> <td>健康生活方式</td> <td>讲究卫生,有良好的卫生习惯</td> <td>3.00</td> <td> <input type="hidden" name="appraiseItemIndex6" value="68086a63-3e1a-4fba-bb41-d7b32d213768"></input> <input type="hidden" name="appraiseIndex" value="3b3ba937-6fe8-4d55-a997-600ac739735e"></input> <input type="hidden" name="appraiseType" value="teacher"></input> <input type="hidden" id="studentInput" name="studentNo" value=""></input> <input type="hidden" name="appraiseWeight6" value="3.00"></input> <input type="radio" id="appraiseResult6_0" name="appraiseResult6" value="A"></input> <label for="appraiseResult6_0">优</label> <input type="radio" id="appraiseResult6_1" name="appraiseResult6" value="B"></input> <label for="appraiseResult6_1">好</label> <input type="radio" id="appraiseResult6_2" name="appraiseResult6" value="C"></input> <label for="appraiseResult6_2">良</label> <input type="radio" id="appraiseResult6_3" name="appraiseResult6" value="D"></input> <label for="appraiseResult6_3">差</label> <input type="radio" id="appraiseResult6_4" name="appraiseResult6" value="E"></input> <label for="appraiseResult6_4">极差</label> </td> </tr> <tr class="odd"> <td>运动与健康</td> <td>健康生活方式</td> <td>珍惜时间,按时作息,生活有规律,合理安排课余生活</td> <td>2.00</td> <td> <input type="hidden" name="appraiseItemIndex7" value="68086a63-3e1a-4fba-bb41-d7b32d213768"></input> <input type="hidden" name="appraiseIndex" value="3b3ba937-6fe8-4d55-a997-600ac739735e"></input> <input type="hidden" name="appraiseType" value="teacher"></input> <input type="hidden" id="studentInput" name="studentNo" value=""></input> <input type="hidden" name="appraiseWeight7" value="2.00"></input> <input type="radio" id="appraiseResult7_0" name="appraiseResult7" value="A"></input> <label for="appraiseResult7_0">优</label> <input type="radio" id="appraiseResult7_1" name="appraiseResult7" value="B"></input> <label for="appraiseResult7_1">好</label> <input type="radio" id="appraiseResult7_2" name="appraiseResult7" value="C"></input> <label for="appraiseResult7_2">良</label> <input type="radio" id="appraiseResult7_3" name="appraiseResult7" value="D"></input> <label for="appraiseResult7_3">差</label> <input type="radio" id="appraiseResult7_4" name="appraiseResult7" value="E"></input> <label for="appraiseResult7_4">极差</label> </td> </tr> <tr class="even"> <td>公民素养</td> <td>有社会责任感</td> <td>关心时政,维护公共利益</td> <td>1.00</td> <td> <input type="hidden" name="appraiseItemIndex8" value="6f8dcba9-7518-429f-a317-bf4618801fc2"></input> <input type="hidden" name="appraiseIndex" value="3b3ba937-6fe8-4d55-a997-600ac739735e"></input> <input type="hidden" name="appraiseType" value="teacher"></input> <input type="hidden" id="studentInput" name="studentNo" value=""></input> <input type="hidden" name="appraiseWeight8" value="1.00"></input> <input type="radio" id="appraiseResult8_0" name="appraiseResult8" value="A"></input> <label for="appraiseResult8_0">优</label> <input type="radio" id="appraiseResult8_1" name="appraiseResult8" value="B"></input> <label for="appraiseResult8_1">好</label> <input type="radio" id="appraiseResult8_2" name="appraiseResult8" value="C"></input> <label for="appraiseResult8_2">良</label> <input type="radio" id="appraiseResult8_3" name="appraiseResult8" value="D"></input> <label for="appraiseResult8_3">差</label> <input type="radio" id="appraiseResult8_4" name="appraiseResult8" value="E"></input> <label for="appraiseResult8_4">极差</label> </td> </tr> <tr class="odd"> <td>公民素养</td> <td>有社会责任感</td> <td>扶贫帮困,富有爱心</td> <td>2.00</td> <td> <input type="hidden" name="appraiseItemIndex9" value="6f8dcba9-7518-429f-a317-bf4618801fc2"></input> <input type="hidden" name="appraiseIndex" value="3b3ba937-6fe8-4d55-a997-600ac739735e"></input> <input type="hidden" name="appraiseType" value="teacher"></input> <input type="hidden" id="studentInput" name="studentNo" value=""></input> <input type="hidden" name="appraiseWeight9" value="2.00"></input> <input type="radio" id="appraiseResult9_0" name="appraiseResult9" value="A"></input> <label for="appraiseResult9_0">优</label> <input type="radio" id="appraiseResult9_1" name="appraiseResult9" value="B"></input> <label for="appraiseResult9_1">好</label> <input type="radio" id="appraiseResult9_2" name="appraiseResult9" value="C"></input> <label for="appraiseResult9_2">良</label> <input type="radio" id="appraiseResult9_3" name="appraiseResult9" value="D"></input> <label for="appraiseResult9_3">差</label> <input type="radio" id="appraiseResult9_4" name="appraiseResult9" value="E"></input> <label for="appraiseResult9_4">极差</label> </td> </tr> <tr class="even"> <td>公民素养</td> <td>有社会责任感</td> <td>积极参加环保等实践活动</td> <td>2.00</td> <td> <input type="hidden" name="appraiseItemIndex10" value="6f8dcba9-7518-429f-a317-bf4618801fc2"></input> <input type="hidden" name="appraiseIndex" value="3b3ba937-6fe8-4d55-a997-600ac739735e"></input> <input type="hidden" name="appraiseType" value="teacher"></input> <input type="hidden" id="studentInput" name="studentNo" value=""></input> <input type="hidden" name="appraiseWeight10" value="2.00"></input> <input type="radio" id="appraiseResult10_0" name="appraiseResult10" value="A"></input> <label for="appraiseResult10_0">优</label> <input type="radio" id="appraiseResult10_1" name="appraiseResult10" value="B"></input> <label for="appraiseResult10_1">好</label> <input type="radio" id="appraiseResult10_2" name="appraiseResult10" value="C"></input> <label for="appraiseResult10_2">良</label> <input type="radio" id="appraiseResult10_3" name="appraiseResult10" value="D"></input> <label for="appraiseResult10_3">差</label> <input type="radio" id="appraiseResult10_4" name="appraiseResult10" value="E"></input> <label for="appraiseResult10_4">极差</label> </td> </tr> <tr class="odd"> <td>公民素养</td> <td>注重修养举止文明</td> <td>勤劳节俭,仪表着装得体</td> <td>2.00</td> <td> <input type="hidden" name="appraiseItemIndex11" value="6f8dcba9-7518-429f-a317-bf4618801fc2"></input> <input type="hidden" name="appraiseIndex" value="3b3ba937-6fe8-4d55-a997-600ac739735e"></input> <input type="hidden" name="appraiseType" value="teacher"></input> <input type="hidden" id="studentInput" name="studentNo" value=""></input> <input type="hidden" name="appraiseWeight11" value="2.00"></input> <input type="radio" id="appraiseResult11_0" name="appraiseResult11" value="A"></input> <label for="appraiseResult11_0">优</label> <input type="radio" id="appraiseResult11_1" name="appraiseResult11" value="B"></input> <label for="appraiseResult11_1">好</label> <input type="radio" id="appraiseResult11_2" name="appraiseResult11" value="C"></input> <label for="appraiseResult11_2">良</label> <input type="radio" id="appraiseResult11_3" name="appraiseResult11" value="D"></input> <label for="appraiseResult11_3">差</label> <input type="radio" id="appraiseResult11_4" name="appraiseResult11" value="E"></input> <label for="appraiseResult11_4">极差</label> </td> </tr> <tr class="even"> <td>公民素养</td> <td>注重修养举止文明</td> <td>未经家长或老师同意不得在外住宿或留宿他人</td> <td>1.00</td> <td> <input type="hidden" name="appraiseItemIndex12" value="6f8dcba9-7518-429f-a317-bf4618801fc2"></input> <input type="hidden" name="appraiseIndex" value="3b3ba937-6fe8-4d55-a997-600ac739735e"></input> <input type="hidden" name="appraiseType" value="teacher"></input> <input type="hidden" id="studentInput" name="studentNo" value=""></input> <input type="hidden" name="appraiseWeight12" value="1.00"></input> <input type="radio" id="appraiseResult12_0" name="appraiseResult12" value="A"></input> <label for="appraiseResult12_0">优</label> <input type="radio" id="appraiseResult12_1" name="appraiseResult12" value="B"></input> <label for="appraiseResult12_1">好</label> <input type="radio" id="appraiseResult12_2" name="appraiseResult12" value="C"></input> <label for="appraiseResult12_2">良</label> <input type="radio" id="appraiseResult12_3" name="appraiseResult12" value="D"></input> <label for="appraiseResult12_3">差</label> <input type="radio" id="appraiseResult12_4" name="appraiseResult12" value="E"></input> <label for="appraiseResult12_4">极差</label> </td> </tr> <tr class="odd"> <td>公民素养</td> <td>注重修养举止文明</td> <td>尊敬师长,礼貌待人,语言文明</td> <td>2.00</td> <td> <input type="hidden" name="appraiseItemIndex13" value="6f8dcba9-7518-429f-a317-bf4618801fc2"></input> <input type="hidden" name="appraiseIndex" value="3b3ba937-6fe8-4d55-a997-600ac739735e"></input> <input type="hidden" name="appraiseType" value="teacher"></input> <input type="hidden" id="studentInput" name="studentNo" value=""></input> <input type="hidden" name="appraiseWeight13" value="2.00"></input> <input type="radio" id="appraiseResult13_0" name="appraiseResult13" value="A"></input> <label for="appraiseResult13_0">优</label> <input type="radio" id="appraiseResult13_1" name="appraiseResult13" value="B"></input> <label for="appraiseResult13_1">好</label> <input type="radio" id="appraiseResult13_2" name="appraiseResult13" value="C"></input> <label for="appraiseResult13_2">良</label> <input type="radio" id="appraiseResult13_3" name="appraiseResult13" value="D"></input> <label for="appraiseResult13_3">差</label> <input type="radio" id="appraiseResult13_4" name="appraiseResult13" value="E"></input> <label for="appraiseResult13_4">极差</label> </td> </tr> </tbody> </table> </div> </fieldset> </form> </body> </html>