您现在的位置： 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文
js控制table合并具体实现
作者：佚名 责任编辑：admin 更新时间：2022-06-22
这篇文章主要介绍了js控制table合并的具体实现,需要的朋友可以参考下
代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>无标题文档 </title> </head> <body> <table width="100%" border="1" cellspacing="0" cellpadding="0" id="tab"> <tr> <td rowspan="0">张三 </td> <td>男 </td> <td>22 </td> <td>数学 </td> <td>90 </td> </tr> <tr> <td rowspan="0">张三 </td> <td>男 </td> <td>22 </td> <td>数学 </td> <td>90 </td> </tr> <tr> <td rowspan="0">张三 </td> <td>女 </td> <td>22 </td> <td>语文 </td> <td>70 </td> </tr> <tr> <td rowspan="0">张三 </td> <td>女 </td> <td>22 </td> <td>英语 </td> <td>60 </td> </tr> <tr> <td rowspan="0">李四 </td> <td>女 </td> <td>22 </td> <td>数学 </td> <td>60 </td> </tr> <tr> <td rowspan="0">李四 </td> <td>女 </td> <td>19 </td> <td>语文 </td> <td>60 </td> </tr> <tr> <td rowspan="0">王五 </td> <td>男 </td> <td>19 </td> <td>英语 </td> <td>60 </td> </tr> </table> <script type="text/javascript"> window.onload = function(){ var tab = document.getElementById("tab"); var col =0; megercell(tab, col); megercell1(tab, col+1); for(var i=0; i<tab.rows.length; i++){ // alert(tab.rows[i].cells[0].getAttribute("rowspan")); } }; function megercell(tab, col){ count = 1; val = ""; for(var i=0; i<tab.rows.length; i++){ if(val == tab.rows[i].cells[col].innerHTML){ count++; }else{ if(count > 1){ from = i - count; tab.rows[from].cells[col].rowSpan = count; for(var j=from+1; j<i; j++){ tab.rows[j].cells[col].style.display = "none"; } count = 1; } val = tab.rows[i].cells[col].innerHTML; } } } function megercell1(tab, col){ count = 1; val = ""; var rowspan = 0; for(var i=0; i<tab.rows.length;){ rowspan = parseInt(tab.rows[i].cells[0].getAttribute("rowspan")); if(rowspan) { for(var n = 0; n < rowspan; n++) { if(val == tab.rows[i].cells[col].innerHTML){ count++; }else{ if(count > 1){ from = i - count; tab.rows[from].cells[col].rowSpan = count; for(var j=from+1; j<i; j++){ tab.rows[j].cells[col].style.display = "none"; } count = 1; } val = tab.rows[i].cells[col].innerHTML; } i++; } if(count > 1) { from = i - count; alert(from +" "+ i +" "+ count); tab.rows[from].cells[col].rowSpan = count; for(var j=from+1; j<i; j++){ tab.rows[j].cells[col].style.display = "none"; } } count = 1; val = ""; } else { i++; } } } </script> </body> </html>- 上一个程序编程： js动态创建上传表单通过iframe模拟Ajax无刷新的具体实现
- 下一个程序编程： JS的get和set使用示例
