码迷,mamicode.com
首页 > Web开发 > 详细

使用js合并table中的单元格

时间:2016-06-20 12:35:50      阅读:449      评论:0      收藏:0      [点我收藏+]

标签:

用primefaces做的报表,领导要求合并相同内容的单元格,但是primefaces没有找到可以合并单元格的组件,想来想去,只有页面加载后用js合并了。

http://blog.csdn.net/dengsilinming/article/details/8028490#html 这位老兄给出了例子,只做了少量改动就写出了适合自己的代码,感谢这位老兄。

 

技术分享
  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5 <meta http-equiv="pragma" content="no-cache">
  6 <meta http-equiv="cache-control" content="no-cache">
  7 <meta http-equiv="expires" content="0">
  8 <title>评价信息详情</title>
  9 <script type="text/javascript">
 10   window.onload = function(){fixRowspan([0,1]);}//页面加载完成执行js函数
 11   function fixRowspan(arr) {
 12     var tb = document.getElementById("appraiseDetailBean");
 13     //var arr = [0,1];//对第一列和第二列进行合并
 14     arr.sort(function(a,b){return a<b?1:-1});//从大到小排序,以便先合并后面的列,再合并前面的列
 15     for(var j=0;j<arr.length;j++){
 16       var x = arr[j];
 17       var row_span_num = 1;
 18       var pre_row_value = "";
 19       var pre_row_obj;
 20       for ( var i = 1; i < tb.rows.length; i++) {
 21         var cur_row_value = tb.rows[i].cells[x].innerHTML;
 22         if(pre_row_value == ""){//上一个单元格为空
 23           pre_row_obj = tb.rows[i].cells[x];
 24           pre_row_value = cur_row_value;
 25         }else if(pre_row_value == cur_row_value){//与上一个单元格相等
 26           tb.rows[i].deleteCell(x);
 27           row_span_num++;
 28           if (i == tb.rows.length-1) {//如果最后一个单元格与上一个单元格相等
 29             pre_row_obj.setAttribute("rowSpan", row_span_num);
 30           }
 31         }else{//与上一个单元格不等
 32           pre_row_obj.setAttribute("rowSpan", row_span_num);
 33           row_span_num = 1;
 34           pre_row_obj = tb.rows[i].cells[x];
 35           pre_row_value = cur_row_value;
 36         }
 37       }
 38     }
 39   }
 40 </script>
 41 <style>
 42   td,th{border:solid #add9c0; border-width:0px 1px 1px 0px; padding-left:10px;}
 43   table{border:solid #add9c0; border-width:1px 0px 0px 1px;}
 44 </style>
 45 </head>
 46 <body>
 47     <form action="XXX" method="post" target="mainWorkArea">
 48         <fieldset>
 49             <legend>教师评价</legend>
 50             <div id="content">
 51                 <table id="appraiseDetailBean">
 52                     <caption>上学期-评价</caption>
 53                     <thead>
 54                         <tr>
 55                             <th>维 度</th>
 56                             <th>要 素</th>
 57                             <th>关 键 表 现</th>
 58                             <th>权重</th>
 59                             <th>评 价 标 准</th>
 60                         </tr>
 61                     </thead>
 62                     <tbody>
 63                         <tr class="odd">
 64                             <td>运动与健康</td>
 65                             <td>习惯与技能</td>
 66                             <td>热爱体育运动,养成锻炼习惯,“两操”出勤率高,动作规范,效果好</td>
 67                             <td>3.00</td>
 68                             <td>
 69                                 <input type="hidden" name="appraiseItemIndex1" value="68086a63-3e1a-4fba-bb41-d7b32d213768"></input>
 70                                 <input type="hidden" name="appraiseIndex" value="3b3ba937-6fe8-4d55-a997-600ac739735e"></input>
 71                                 <input type="hidden" name="appraiseType" value="teacher"></input>
 72                                 <input type="hidden" id="studentInput" name="studentNo" value=""></input>
 73                                 <input type="hidden" name="appraiseWeight1" value="3.00"></input>
 74 
 75                                 <input type="radio" id="appraiseResult1_0" name="appraiseResult1" value="A"></input>
 76                                 <label for="appraiseResult1_0"></label>
 77                                 <input type="radio" id="appraiseResult1_1" name="appraiseResult1" value="B"></input>
 78                                 <label for="appraiseResult1_1"></label>
 79                                 <input type="radio" id="appraiseResult1_2" name="appraiseResult1" value="C"></input>
 80                                 <label for="appraiseResult1_2"></label>
 81                                 <input type="radio" id="appraiseResult1_3" name="appraiseResult1" value="D"></input>
 82                                 <label for="appraiseResult1_3"></label>
 83                                 <input type="radio" id="appraiseResult1_4" name="appraiseResult1" value="E"></input>
 84                                 <label for="appraiseResult1_4">极差</label>
 85                             </td>
 86                         </tr>
 87                         <tr class="even">
 88                             <td>运动与健康</td>
 89                             <td>习惯与技能</td>
 90                             <td>有一定的体育爱好或特长,积极参加各项活动和竞赛,运动会主动参加</td>
 91                             <td>4.00</td>
 92                             <td>
 93                                 <input type="hidden" name="appraiseItemIndex2" value="68086a63-3e1a-4fba-bb41-d7b32d213768"></input>
 94                                 <input type="hidden" name="appraiseIndex" value="3b3ba937-6fe8-4d55-a997-600ac739735e"></input>
 95                                 <input type="hidden" name="appraiseType" value="teacher"></input>
 96                                 <input type="hidden" id="studentInput" name="studentNo" value=""></input>
 97                                 <input type="hidden" name="appraiseWeight2" value="4.00"></input>
 98 
 99                                 <input type="radio" id="appraiseResult2_0" name="appraiseResult2" value="A"></input>
100                                 <label for="appraiseResult2_0"></label>
101                                 <input type="radio" id="appraiseResult2_1" name="appraiseResult2" value="B"></input>
102                                 <label for="appraiseResult2_1"></label>
103                                 <input type="radio" id="appraiseResult2_2" name="appraiseResult2" value="C"></input>
104                                 <label for="appraiseResult2_2"></label>
105                                 <input type="radio" id="appraiseResult2_3" name="appraiseResult2" value="D"></input>
106                                 <label for="appraiseResult2_3"></label>
107                                 <input type="radio" id="appraiseResult2_4" name="appraiseResult2" value="E"></input>
108                                 <label for="appraiseResult2_4">极差</label>
109                             </td>
110                         </tr>
111                         <tr class="odd">
112                             <td>运动与健康</td>
113                             <td>习惯与技能</td>
114                             <td>具备一定的运动技能,体育课考查情况好</td>
115                             <td>3.00</td>
116                             <td>
117                                 <input type="hidden" name="appraiseItemIndex3" value="68086a63-3e1a-4fba-bb41-d7b32d213768"></input>
118                                 <input type="hidden" name="appraiseIndex" value="3b3ba937-6fe8-4d55-a997-600ac739735e"></input>
119                                 <input type="hidden" name="appraiseType" value="teacher"></input>
120                                 <input type="hidden" id="studentInput" name="studentNo" value=""></input>
121                                 <input type="hidden" name="appraiseWeight3" value="3.00"></input>
122 
123                                 <input type="radio" id="appraiseResult3_0" name="appraiseResult3" value="A"></input>
124                                 <label for="appraiseResult3_0"></label>
125                                 <input type="radio" id="appraiseResult3_1" name="appraiseResult3" value="B"></input>
126                                 <label for="appraiseResult3_1"></label>
127                                 <input type="radio" id="appraiseResult3_2" name="appraiseResult3" value="C"></input>
128                                 <label for="appraiseResult3_2"></label>
129                                 <input type="radio" id="appraiseResult3_3" name="appraiseResult3" value="D"></input>
130                                 <label for="appraiseResult3_3"></label>
131                                 <input type="radio" id="appraiseResult3_4" name="appraiseResult3" value="E"></input>
132                                 <label for="appraiseResult3_4">极差</label>
133                             </td>
134                         </tr>
135                         <tr class="even">
136                             <td>运动与健康</td>
137                             <td>身心健康状况</td>
138                             <td>心理健康,能控制和调节自己的情绪,能正确的评价自我,积极向上</td>
139                             <td>2.00</td>
140                             <td>
141                                 <input type="hidden" name="appraiseItemIndex4" value="68086a63-3e1a-4fba-bb41-d7b32d213768"></input>
142                                 <input type="hidden" name="appraiseIndex" value="3b3ba937-6fe8-4d55-a997-600ac739735e"></input>
143                                 <input type="hidden" name="appraiseType" value="teacher"></input>
144                                 <input type="hidden" id="studentInput" name="studentNo" value=""></input>
145                                 <input type="hidden" name="appraiseWeight4" value="2.00"></input>
146 
147                                 <input type="radio" id="appraiseResult4_0" name="appraiseResult4" value="A"></input>
148                                 <label for="appraiseResult4_0"></label>
149                                 <input type="radio" id="appraiseResult4_1" name="appraiseResult4" value="B"></input>
150                                 <label for="appraiseResult4_1"></label>
151                                 <input type="radio" id="appraiseResult4_2" name="appraiseResult4" value="C"></input>
152                                 <label for="appraiseResult4_2"></label>
153                                 <input type="radio" id="appraiseResult4_3" name="appraiseResult4" value="D"></input>
154                                 <label for="appraiseResult4_3"></label>
155                                 <input type="radio" id="appraiseResult4_4" name="appraiseResult4" value="E"></input>
156                                 <label for="appraiseResult4_4">极差</label>
157                             </td>
158                         </tr>
159                         <tr class="odd">
160                             <td>运动与健康</td>
161                             <td>身心健康状况</td>
162                             <td>体育考试合格以上,有良好的身体素质,能正常参加学习劳动</td>
163                             <td>3.00</td>
164                             <td>
165                                 <input type="hidden" name="appraiseItemIndex5" value="68086a63-3e1a-4fba-bb41-d7b32d213768"></input>
166                                 <input type="hidden" name="appraiseIndex" value="3b3ba937-6fe8-4d55-a997-600ac739735e"></input>
167                                 <input type="hidden" name="appraiseType" value="teacher"></input>
168                                 <input type="hidden" id="studentInput" name="studentNo" value=""></input>
169                                 <input type="hidden" name="appraiseWeight5" value="3.00"></input>
170 
171                                 <input type="radio" id="appraiseResult5_0" name="appraiseResult5" value="A"></input>
172                                 <label for="appraiseResult5_0"></label>
173                                 <input type="radio" id="appraiseResult5_1" name="appraiseResult5" value="B"></input>
174                                 <label for="appraiseResult5_1"></label>
175                                 <input type="radio" id="appraiseResult5_2" name="appraiseResult5" value="C"></input>
176                                 <label for="appraiseResult5_2"></label>
177                                 <input type="radio" id="appraiseResult5_3" name="appraiseResult5" value="D"></input>
178                                 <label for="appraiseResult5_3"></label>
179                                 <input type="radio" id="appraiseResult5_4" name="appraiseResult5" value="E"></input>
180                                 <label for="appraiseResult5_4">极差</label>
181                             </td>
182                         </tr>
183                         <tr class="even">
184                             <td>运动与健康</td>
185                             <td>健康生活方式</td>
186                             <td>讲究卫生,有良好的卫生习惯</td>
187                             <td>3.00</td>
188                             <td>
189                                 <input type="hidden" name="appraiseItemIndex6" value="68086a63-3e1a-4fba-bb41-d7b32d213768"></input>
190                                 <input type="hidden" name="appraiseIndex"
191                                 value="3b3ba937-6fe8-4d55-a997-600ac739735e"></input>
192                                 <input type="hidden" name="appraiseType" value="teacher"></input>
193                                 <input type="hidden" id="studentInput" name="studentNo" value=""></input>
194                                 <input type="hidden" name="appraiseWeight6" value="3.00"></input>
195 
196                                 <input type="radio" id="appraiseResult6_0" name="appraiseResult6" value="A"></input>
197                                 <label for="appraiseResult6_0"></label>
198                                 <input type="radio" id="appraiseResult6_1" name="appraiseResult6" value="B"></input>
199                                 <label for="appraiseResult6_1"></label>
200                                 <input type="radio" id="appraiseResult6_2" name="appraiseResult6" value="C"></input>
201                                 <label for="appraiseResult6_2"></label>
202                                 <input type="radio" id="appraiseResult6_3" name="appraiseResult6" value="D"></input>
203                                 <label for="appraiseResult6_3"></label>
204                                 <input type="radio" id="appraiseResult6_4" name="appraiseResult6" value="E"></input>
205                                 <label for="appraiseResult6_4">极差</label>
206                             </td>
207                         </tr>
208                         <tr class="odd">
209                             <td>运动与健康</td>
210                             <td>健康生活方式</td>
211                             <td>珍惜时间,按时作息,生活有规律,合理安排课余生活</td>
212                             <td>2.00</td>
213                             <td>
214                                 <input type="hidden" name="appraiseItemIndex7"
215                                 value="68086a63-3e1a-4fba-bb41-d7b32d213768"></input>
216                                 <input type="hidden" name="appraiseIndex" value="3b3ba937-6fe8-4d55-a997-600ac739735e"></input>
217                                 <input type="hidden" name="appraiseType" value="teacher"></input>
218                                 <input type="hidden" id="studentInput" name="studentNo" value=""></input>
219                                 <input type="hidden" name="appraiseWeight7" value="2.00"></input>
220 
221                                 <input type="radio" id="appraiseResult7_0" name="appraiseResult7" value="A"></input>
222                                 <label for="appraiseResult7_0"></label>
223                                 <input type="radio" id="appraiseResult7_1" name="appraiseResult7" value="B"></input>
224                                 <label for="appraiseResult7_1"></label>
225                                 <input type="radio" id="appraiseResult7_2" name="appraiseResult7" value="C"></input>
226                                 <label for="appraiseResult7_2"></label>
227                                 <input type="radio" id="appraiseResult7_3" name="appraiseResult7" value="D"></input>
228                                 <label for="appraiseResult7_3"></label>
229                                 <input type="radio" id="appraiseResult7_4" name="appraiseResult7" value="E"></input>
230                                 <label for="appraiseResult7_4">极差</label>
231                             </td>
232                         </tr>
233                         <tr class="even">
234                             <td>公民素养</td>
235                             <td>有社会责任感</td>
236                             <td>关心时政,维护公共利益</td>
237                             <td>1.00</td>
238                             <td>
239                                 <input type="hidden" name="appraiseItemIndex8" value="6f8dcba9-7518-429f-a317-bf4618801fc2"></input>
240                                 <input type="hidden" name="appraiseIndex" value="3b3ba937-6fe8-4d55-a997-600ac739735e"></input>
241                                 <input type="hidden" name="appraiseType" value="teacher"></input>
242                                 <input type="hidden" id="studentInput" name="studentNo" value=""></input>
243                                 <input type="hidden" name="appraiseWeight8" value="1.00"></input>
244 
245                                 <input type="radio" id="appraiseResult8_0"
246                                 name="appraiseResult8" value="A"></input>
247                                 <label for="appraiseResult8_0"></label>
248                                 <input type="radio" id="appraiseResult8_1" name="appraiseResult8" value="B"></input>
249                                 <label for="appraiseResult8_1"></label>
250                                 <input type="radio" id="appraiseResult8_2" name="appraiseResult8" value="C"></input>
251                                 <label for="appraiseResult8_2"></label>
252                                 <input type="radio" id="appraiseResult8_3" name="appraiseResult8" value="D"></input>
253                                 <label for="appraiseResult8_3"></label>
254                                 <input type="radio" id="appraiseResult8_4" name="appraiseResult8" value="E"></input>
255                                 <label for="appraiseResult8_4">极差</label>
256                             </td>
257                         </tr>
258                         <tr class="odd">
259                             <td>公民素养</td>
260                             <td>有社会责任感</td>
261                             <td>扶贫帮困,富有爱心</td>
262                             <td>2.00</td>
263                             <td>
264                                 <input type="hidden" name="appraiseItemIndex9" value="6f8dcba9-7518-429f-a317-bf4618801fc2"></input>
265                                 <input type="hidden" name="appraiseIndex" value="3b3ba937-6fe8-4d55-a997-600ac739735e"></input>
266                                 <input type="hidden" name="appraiseType" value="teacher"></input>
267                                 <input type="hidden" id="studentInput" name="studentNo" value=""></input>
268                                 <input type="hidden" name="appraiseWeight9" value="2.00"></input>
269 
270                                 <input type="radio" id="appraiseResult9_0" name="appraiseResult9" value="A"></input>
271                                 <label for="appraiseResult9_0"></label>
272                                 <input type="radio" id="appraiseResult9_1" name="appraiseResult9" value="B"></input>
273                                 <label for="appraiseResult9_1"></label>
274                                 <input type="radio" id="appraiseResult9_2" name="appraiseResult9" value="C"></input>
275                                 <label for="appraiseResult9_2"></label>
276                                 <input type="radio" id="appraiseResult9_3" name="appraiseResult9" value="D"></input>
277                                 <label for="appraiseResult9_3"></label>
278                                 <input type="radio" id="appraiseResult9_4" name="appraiseResult9" value="E"></input>
279                                 <label for="appraiseResult9_4">极差</label>
280                             </td>
281                         </tr>
282                         <tr class="even">
283                             <td>公民素养</td>
284                             <td>有社会责任感</td>
285                             <td>积极参加环保等实践活动</td>
286                             <td>2.00</td>
287                             <td>
288                                 <input type="hidden" name="appraiseItemIndex10" value="6f8dcba9-7518-429f-a317-bf4618801fc2"></input>
289                                 <input type="hidden" name="appraiseIndex" value="3b3ba937-6fe8-4d55-a997-600ac739735e"></input>
290                                 <input type="hidden" name="appraiseType" value="teacher"></input>
291                                 <input type="hidden" id="studentInput" name="studentNo" value=""></input>
292                                 <input type="hidden" name="appraiseWeight10" value="2.00"></input>
293 
294                                 <input type="radio" id="appraiseResult10_0" name="appraiseResult10" value="A"></input>
295                                 <label for="appraiseResult10_0"></label>
296                                 <input type="radio" id="appraiseResult10_1" name="appraiseResult10" value="B"></input>
297                                 <label for="appraiseResult10_1"></label>
298                                 <input type="radio" id="appraiseResult10_2" name="appraiseResult10" value="C"></input>
299                                 <label for="appraiseResult10_2"></label>
300                                 <input type="radio" id="appraiseResult10_3" name="appraiseResult10" value="D"></input>
301                                 <label for="appraiseResult10_3"></label>
302                                 <input type="radio" id="appraiseResult10_4" name="appraiseResult10" value="E"></input>
303                                 <label for="appraiseResult10_4">极差</label>
304                             </td>
305                         </tr>
306                         <tr class="odd">
307                             <td>公民素养</td>
308                             <td>注重修养举止文明</td>
309                             <td>勤劳节俭,仪表着装得体</td>
310                             <td>2.00</td>
311                             <td>
312                                 <input type="hidden" name="appraiseItemIndex11" value="6f8dcba9-7518-429f-a317-bf4618801fc2"></input>
313                                 <input type="hidden" name="appraiseIndex" value="3b3ba937-6fe8-4d55-a997-600ac739735e"></input>
314                                 <input type="hidden" name="appraiseType" value="teacher"></input>
315                                 <input type="hidden" id="studentInput" name="studentNo" value=""></input>
316                                 <input type="hidden" name="appraiseWeight11" value="2.00"></input>
317 
318                                 <input type="radio" id="appraiseResult11_0" name="appraiseResult11" value="A"></input>
319                                 <label for="appraiseResult11_0"></label>
320                                 <input type="radio" id="appraiseResult11_1" name="appraiseResult11" value="B"></input>
321                                 <label for="appraiseResult11_1"></label>
322                                 <input type="radio" id="appraiseResult11_2" name="appraiseResult11" value="C"></input>
323                                 <label for="appraiseResult11_2"></label>
324                                 <input type="radio" id="appraiseResult11_3" name="appraiseResult11" value="D"></input>
325                                 <label for="appraiseResult11_3"></label>
326                                 <input type="radio" id="appraiseResult11_4" name="appraiseResult11" value="E"></input>
327                                 <label for="appraiseResult11_4">极差</label>
328                             </td>
329                         </tr>
330                         <tr class="even">
331                             <td>公民素养</td>
332                             <td>注重修养举止文明</td>
333                             <td>未经家长或老师同意不得在外住宿或留宿他人</td>
334                             <td>1.00</td>
335                             <td>
336                                 <input type="hidden" name="appraiseItemIndex12" value="6f8dcba9-7518-429f-a317-bf4618801fc2"></input>
337                                 <input type="hidden" name="appraiseIndex" value="3b3ba937-6fe8-4d55-a997-600ac739735e"></input>
338                                 <input type="hidden" name="appraiseType" value="teacher"></input>
339                                 <input type="hidden" id="studentInput" name="studentNo" value=""></input>
340                                 <input type="hidden" name="appraiseWeight12" value="1.00"></input>
341 
342                                 <input type="radio" id="appraiseResult12_0" name="appraiseResult12" value="A"></input>
343                                 <label for="appraiseResult12_0"></label>
344                                 <input type="radio" id="appraiseResult12_1" name="appraiseResult12" value="B"></input>
345                                 <label for="appraiseResult12_1"></label>
346                                 <input type="radio" id="appraiseResult12_2" name="appraiseResult12" value="C"></input>
347                                 <label for="appraiseResult12_2"></label>
348                                 <input type="radio" id="appraiseResult12_3" name="appraiseResult12" value="D"></input>
349                                 <label for="appraiseResult12_3"></label>
350                                 <input type="radio" id="appraiseResult12_4" name="appraiseResult12" value="E"></input>
351                                 <label for="appraiseResult12_4">极差</label>
352                             </td>
353                         </tr>
354                         <tr class="odd">
355                             <td>公民素养</td>
356                             <td>注重修养举止文明</td>
357                             <td>尊敬师长,礼貌待人,语言文明</td>
358                             <td>2.00</td>
359                             <td>
360                                 <input type="hidden" name="appraiseItemIndex13" value="6f8dcba9-7518-429f-a317-bf4618801fc2"></input>
361                                 <input type="hidden" name="appraiseIndex" value="3b3ba937-6fe8-4d55-a997-600ac739735e"></input>
362                                 <input type="hidden" name="appraiseType" value="teacher"></input>
363                                 <input type="hidden" id="studentInput" name="studentNo" value=""></input>
364                                 <input type="hidden" name="appraiseWeight13" value="2.00"></input>
365 
366                                 <input type="radio" id="appraiseResult13_0" name="appraiseResult13" value="A"></input>
367                                 <label for="appraiseResult13_0"></label>
368                                 <input type="radio" id="appraiseResult13_1" name="appraiseResult13" value="B"></input>
369                                 <label for="appraiseResult13_1"></label>
370                                 <input type="radio" id="appraiseResult13_2" name="appraiseResult13" value="C"></input>
371                                 <label for="appraiseResult13_2"></label>
372                                 <input type="radio" id="appraiseResult13_3" name="appraiseResult13" value="D"></input>
373                                 <label for="appraiseResult13_3"></label>
374                                 <input type="radio" id="appraiseResult13_4" name="appraiseResult13" value="E"></input>
375                                 <label for="appraiseResult13_4">极差</label>
376                             </td>
377                         </tr>
378                     </tbody>
379                 </table>
380             </div>
381         </fieldset>
382     </form>
383 </body>
384 </html>
table合并单元格

 

使用js合并table中的单元格

标签:

原文地址:http://www.cnblogs.com/guodefu909/p/5599997.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!