Javascript合并表格相同内容单元格示例

效果图:

HTML代码:

[html][/html]

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  2. <html xmlns=”http://www.w3.org/1999/xhtml”>
  3. <head>
  4. <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
  5. <title>表格相同内容合并</title>
  6. </head>
  7. <body>
  8. 合并前:
  9. <table width=”400″ border=”1″>
  10.   <tr>
  11.     <td>a</td>
  12.     <td>1</td>
  13.     <td>2</td>
  14.     <td>3</td>
  15.     <td>4</td>
  16.     <td>5</td>
  17.   </tr>
  18.   <tr>
  19.     <td>a</td>
  20.     <td>1</td>
  21.     <td>2</td>
  22.     <td>3</td>
  23.     <td>4</td>
  24.     <td>6</td>
  25.   </tr>
  26.   <tr>
  27.     <td>a</td>
  28.     <td>2</td>
  29.     <td>3</td>
  30.     <td>3</td>
  31.     <td>4</td>
  32.     <td> </td>
  33.   </tr>
  34.   <tr>
  35.     <td>b</td>
  36.     <td>3</td>
  37.     <td>4</td>
  38.     <td>6</td>
  39.     <td>7</td>
  40.     <td> </td>
  41.   </tr>
  42.   <tr>
  43.     <td>b</td>
  44.     <td>3</td>
  45.     <td>5</td>
  46.     <td>6</td>
  47.     <td>7</td>
  48.     <td> </td>
  49.   </tr>
  50.   <tr>
  51.     <td>cc</td>
  52.     <td>2</td>
  53.     <td>3</td>
  54.     <td>4</td>
  55.     <td>5</td>
  56.     <td> </td>
  57.   </tr>
  58.   <tr>
  59.     <td>cc</td>
  60.     <td>2</td>
  61.     <td>3</td>
  62.     <td>5</td>
  63.     <td>5</td>
  64.     <td> </td>
  65.   </tr>
  66.   <tr>
  67.     <td>d</td>
  68.     <td>1</td>
  69.     <td>2</td>
  70.     <td>3</td>
  71.     <td>4</td>
  72.     <td> </td>
  73.   </tr>
  74.   <tr>
  75.     <td>e</td>
  76.     <td>1</td>
  77.     <td>2</td>
  78.     <td>3</td>
  79.     <td>4</td>
  80.     <td> </td>
  81.   </tr>
  82. </table><br />
  83. 合并后:<br />
  84. <table width=”400″ border=”1″ id=”table1″>
  85.   <tr>
  86.     <td>a</td>
  87.     <td>1</td>
  88.     <td>2</td>
  89.     <td>3</td>
  90.     <td>4</td>
  91.     <td>5</td>
  92.   </tr>
  93.   <tr>
  94.     <td>a</td>
  95.     <td>1</td>
  96.     <td>2</td>
  97.     <td>3</td>
  98.     <td>4</td>
  99.     <td>6</td>
  100.   </tr>
  101.   <tr>
  102.     <td>a</td>
  103.     <td>2</td>
  104.     <td>3</td>
  105.     <td>3</td>
  106.     <td>4</td>
  107.     <td> </td>
  108.   </tr>
  109.   <tr>
  110.     <td>b</td>
  111.     <td>3</td>
  112.     <td>4</td>
  113.     <td>6</td>
  114.     <td>7</td>
  115.     <td> </td>
  116.   </tr>
  117.   <tr>
  118.     <td>b</td>
  119.     <td>3</td>
  120.     <td>5</td>
  121.     <td>6</td>
  122.     <td>7</td>
  123.     <td> </td>
  124.   </tr>
  125.   <tr>
  126.     <td>cc</td>
  127.     <td>2</td>
  128.     <td>3</td>
  129.     <td>4</td>
  130.     <td>5</td>
  131.     <td> </td>
  132.   </tr>
  133.   <tr>
  134.     <td>cc</td>
  135.     <td>2</td>
  136.     <td>3</td>
  137.     <td>5</td>
  138.     <td>5</td>
  139.     <td> </td>
  140.   </tr>
  141.   <tr>
  142.     <td>d</td>
  143.     <td>1</td>
  144.     <td>2</td>
  145.     <td>3</td>
  146.     <td>4</td>
  147.     <td> </td>
  148.   </tr>
  149.   <tr>
  150.     <td>e</td>
  151.     <td>1</td>
  152.     <td>2</td>
  153.     <td>3</td>
  154.     <td>4</td>
  155.     <td> </td>
  156.   </tr>
  157. </table>
  158. </body>
  159. </html>

JS:

[javascript][/javascript]

  1. <script type=”text/javascript”>
  2.     var rowsCount;
  3.     var colCount;
  4.     function mc1(tableId){
  5.         var tb = document.getElementById(tableId);
  6.         rowsCount = tb.rows.length;
  7.         colCount = tb.rows[0].cells.length;
  8.         var startRow = 0;
  9.         for(var i=0; i<rowsCount-1; i++){
  10.             if(tb.rows[startRow].cells[0].innerHTML == tb.rows[i+1].cells[0].innerHTML){
  11.                 tb.rows[i+1].removeChild(tb.rows[i+1].cells[0]);
  12.                 tb.rows[startRow].cells[0].rowSpan=(tb.rows[startRow].cells[0].rowSpan|0)+1;
  13.                 if(i+2 == rowsCount){
  14.                     mc(tableId,startRow,i+1,1);
  15.                 }
  16.             }else{
  17.                 mc(tableId,startRow,i,1);
  18.                 startRow=i+1;
  19.             }
  20.         }
  21.     }
  22.     function mc(tableId,startRow,endRow,col){
  23.         var tb = document.getElementById(tableId);
  24.         if(col >= tb.rows[0].cells.length){
  25.             return;
  26.         }
  27.         var x=false;
  28.         for(var i=startRow; i<endRow; i++){
  29.             if(tb.rows[startRow].cells[col].innerHTML == tb.rows[i+1].cells[0].innerHTML){
  30.                 tb.rows[i+1].removeChild(tb.rows[i+1].cells[0]);
  31.                 tb.rows[startRow].cells[col].rowSpan=(tb.rows[startRow].cells[col].rowSpan|0)+1;
  32.                 if(i == endRow-1){
  33.                     mc(tableId,startRow,endRow,col+1);
  34.                 }
  35.             }else{
  36.                 mc(tableId,startRow,i+0,col+1);
  37.                 startRow=i+1;
  38.             }
  39.         }
  40.     }
  41.     mc1(‘table1’);
  42. </script>

标签