• 使用js合并table中的单元格


    用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合并单元格
  • 相关阅读:
    2019 SDN上机第1次作业
    团队Git现场编程实战
    团队项目-需求分析报告
    第二次结对编程作业
    老学长的TODOLIST
    离散化
    某大佬的TODOLIST
    第一次个人编程作业
    第一次博客作业
    第一次个人编程作业
  • 原文地址:https://www.cnblogs.com/guodefu909/p/5599997.html
Copyright © 2020-2023  润新知