js表格单元格合并，css表格对角线

时间：2010-09-05 来源：mozhx

js表格单元格合并，css表格对角线

(2010-05-25 12:30:48)

转载

标签：

it

分类：Javascript

每当困难的时候我就念藏经：“噢嘛呢哞嘛哄”，翻译成英文就是:All money go my home!-

最近项目过程中，需要做类似的表格。网上查了下资料，最终都还是实现了。下面给出网上的实现方式，可以根据自己业务的需要做相应的扩展。

1. 使用JS合并单元格重复数据的方法

参考网址：http://www.31km.cn/post/352.html
代码示例：

<html>
<head>
<meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312">
<title>合并表格</title>
<script>
///////////////////////////////////////////////
//   功能：合并表格
//   参数：tb－－需要合并的表格ID
//   参数：colLength－－需要对前几列进行合并，比如，
//   想合并前两列，后面的数据列忽略合并，colLength应为2
//   缺省表示对全部列合并
//   data:   2005.11.6
///////////////////////////////////////////////
function   uniteTable(tb,colLength){
//   检查表格是否规整
if   (!checkTable(tb))   return;
var   i=0;
var   j=0;
var   rowCount=tb.rows.length; //   行数
var   colCount=tb.rows[0].cells.length; //   列数
var   obj1=null;
var   obj2=null;
//   为每个单元格命名
for   (i=0;i<rowCount;i++){
for   (j=0;j<colCount;j++){
tb.rows[i].cells[j].id="tb__"   +   i.toString()   +   "_"   +   j.toString();
}
}
//   逐列检查合并
for   (i=0;i<colCount;i++){
if   (i==colLength)   return;
obj1=document.getElementByIdx("tb__0_"+i.toString())
for   (j=1;j<rowCount;j++){
obj2=document.getElementByIdx("tb__"+j.toString()+"_"+i.toString());
if   (obj1.innerText   ==   obj2.innerText){
obj1.rowSpan++;
obj2.parentNode.removeChild(obj2);
}else{
obj1=document.getElementByIdx("tb__"+j.toString()+"_"+i.toString());
}
}
}
}

/////////////////////////////////////////
//   功能：检查表格是否规整
//   参数：tb－－需要检查的表格ID
//   data:   2005.11.6
/////////////////////////////////////////
function   checkTable(tb){
if   (tb.rows.length==0)   return   false;
if   (tb.rows[0].cells.length==0)   return   false;
for   (var   i=0;i<tb.rows.length;i++){
if   (tb.rows[0].cells.length   !=   tb.rows[i].cells.length)   return   false;
}
return   true;
}
</script>
</head>

<body>
<table   width="400"   border="1"   id="table1">
      <tr>
          <td>a</td>
          <td>for</td>
          <td>100</td>
          <td>200</td>
      </tr>
      <tr>
          <td>a</td>
          <td>for</td>
          <td>150</td>
          <td>230</td>
      </tr>
      <tr>
          <td>a</td>
          <td>if</td>
          <td>100</td>
          <td>200</td>
      </tr>
      <tr>
          <td>a</td>
          <td>if</td>
          <td>300</td>
          <td>240</td>
      </tr>
      <tr>
          <td>a</td>
          <td>if</td>
          <td>320</td>
          <td>230</td>
      </tr>
</table>
<br>
<input   type="button"   value="合并表格"   onClick="uniteTable(table1,2)">
</body>
</html>

效果图：

2. 用div+css模拟表格对角线

参考网址：http://www.blueidea.com/tech/web/2009/6381.asp
代码示例：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用div+css模拟表格对角线</title>
<style type="text/css">
*{padding:0;margin:0;}
caption{font-size:14px;font-weight:bold;}
table{ border-collapse:collapse;border:1px #525152 solid;width:50%;margin:0 auto;margin-top:10px;}
th,td{border:1px #525152 solid;text-align:center;font-size:12px;line-background:#C6C7C6;}
th{background:#D6D3D6;}

.out{
   border-top:40px #D6D3D6 solid;
   width:0px;

   border-left:80px #BDBABD solid;
   position:relative;
}
b{font-style:normal;display:block;position:absolute;top:-40px;left:-40px;width:35px;}
em{font-style:normal;display:block;position:absolute;top:-25px;left:-70px;width:55x;}
.t1{background:#BDBABD;}
</style>
</head>
<body>
<table>
<caption>用div+css模拟表格对角线</caption>
<tr>
    <th style="width:80px;">
       <div class="out">
           <b>类别</b>
           <em>姓名</em>
       </div>
   </th>
    <th>年级</th>
    <th>班级</th>
    <th>成绩</th>
    <th>班级均分</th>
</tr>
<tr>
    <td class="t1">张三</td>
    <td>三</td>
    <td>2</td>
    <td>62</td>
    <td>61</td>
</tr>
<tr>
    <td class="t1">李四</td>
    <td>三</td>
    <td>1</td>
    <td>48</td>
    <td>67</td>
</tr>
<tr>
    <td class="t1">王五</td>
    <td>三</td>
    <td>5</td>
    <td>79</td>
    <td>63</td>
</tr>
<tr>
    <td class="t1">赵六</td>
    <td>三</td>
    <td>4</td>
    <td>89</td>
    <td>66</td>
</tr>
</table>
</body>
</html>

效果图：