zoukankan html css js c++ java

表格代码

<table width="100%" border="1" cellspacing="0" cellpadding="0" id="tab">
<thead>
<tr>
<th>姓名 </th>
<th>性别 </th>
<th>年龄</th>
<th>科目</th>
<th>分数</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三 </td>
<td>男 </td>
<td>22 </td>
<td>数学 </td>
<td>90 </td>
</tr>
<tr>
<td>张三 </td>
<td>男 </td>
<td>22 </td>
<td>数学 </td>
<td>90 </td>
</tr>
<tr>
<td>张三 </td>
<td>女 </td>
<td>22 </td>
<td>语文 </td>
<td>70 </td>
</tr>
<tr>
<td>张三 </td>
<td>女 </td>
<td>22 </td>
<td>英语 </td>
<td>60 </td>
</tr>
<tr>
<td>李四 </td>
<td>女 </td>
<td>22 </td>
<td>数学 </td>
<td>60 </td>
</tr>
<tr>
<td>李四 </td>
<td>女 </td>
<td>19 </td>
<td>语文 </td>
<td>60 </td>
</tr>
<tr>
<td>王五 </td>
<td>男 </td>
<td>19 </td>
<td>英语 </td>
<td>60 </td>
</tr>
<tr>
<td>王五 </td>
<td>男 </td>
<td>19 </td>
<td>英语 </td>
<td>60 </td>
</tr>
<tr>
<td>王五 </td>
<td>男 </td>
<td>19 </td>
<td>英语 </td>
<td>60 </td>
</tr>
</tbody>
</table>
  <script>
                window.onload=function(){
tablecols("tab",4);
                }
function tablecols(id,endrows) {
var trs = document.getElementById('tab').getElementsByTagName('tbody')[0].rows;
var count = 1;
var count2 = 1;
var beginrows = 0;
for (var j = 0; j < endrows; j++) {
if(j==0) {
for (var i = 0; i < trs.length; i++) {
if (i == 0) {
var tds = trs[0].cells[j].innerHTML;
continue;
}
if (trs[i].cells[j].innerHTML == tds) {
++count;
if (i == trs.length - 1) {
if (count >= 2) {
var b = i + 1;
dealwith(trs, b, count, j);
count = 1;
}
}
} else {
if (count >= 2) {
dealwith(trs, i, count, j);
count = 1;
}
tds = trs[i].cells[j].innerHTML;
}
}}else {
for (var n = 0; n < trs.length;) {
var rowspan = trs[n].cells[j - 1].getAttribute('rowspan');
if (n == 0) {
var tds = trs[0].cells[j].innerHTML;
}
if (rowspan) {
for (var m = 0; m < rowspan; m++) {
if (trs[n].cells[j].innerHTML == tds) {
++count2;
if(n==0){--count2}
if (n == trs.length - 1) {
if (count2 >= 2) {
var b = n + 1;
dealwith(trs, b, count2, j);
count2 = 1;
}
}
} else {
if (count2 >= 2) {
dealwith(trs, n, count2, j);
count2 = 1;
}
tds = trs[n].cells[j].innerHTML;
}
n++;
}
rowspan = null;
tds=null;
}else{
++n
}
}
}
}
}
function dealwith(trs,i,count,j){
for (var k = i-1; k > i - count; k--) {
trs[k].cells[j].style.display = "none";
}
trs[i - count].cells[j].rowSpan = count;
}
</script>

姓名	性别	年龄	科目	分数
张三	男	22	数学	90
张三	男	22	数学	90
张三	女	22	语文	70
张三	女	22	英语	60
李四	女	22	数学	60
李四	女	19	语文	60
王五	男	19	英语	60
王五	男	19	英语	60
王五	男	19	英语	60

查看全文

相关阅读:
CSS font 复合属性的顺序
 HTML元素的offsetWidht、clientWidth、scrollWidth属性区别
 javascript document.compatMode属性
 IE下Array.prototype.slice.call(params,0)
JavaScript中的apply()方法和call()方法使用介绍
 字符串与数组转换
 好的网站链接
 [转]走向视网膜（Retina）的Web时代
 如何对一个公司的供应链管理进行数据分析?
Hadoop生态上几个技术的关系与区别：hive、pig、hbase 关系与区别

原文地址：https://www.cnblogs.com/heyinwangchuan/p/6158358.html