JQuery實(shí)現(xiàn)表格中相同單元格合并示例代碼
更新時(shí)間:2013年06月26日 17:50:15 作者:
一定要注意如果從list的開(kāi)始元素循環(huán)下去,remove掉一個(gè)元素后,有些元素就找不到了或者說(shuō)不是要找的那個(gè)元素,感興趣的各位可以研究下哈
代碼:
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<title>merge.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/jquery-ui.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery-ui.js"></script>
<script type="text/javascript">
function merge1(){ //可實(shí)現(xiàn)單元格,通過(guò)給 開(kāi)始cell的比較
var totalRow = $("#tbl").find("tr").length;
var totalCol = $("#tbl").find("tr").eq(0).find("td").length;
for(var col=totalCol-1;col>=1;col--){
spanNum =1;
startCell = $("#tbl").find("tr").eq(totalRow-1).find("td").eq(col);
for(var row = totalRow-1;row>=1;row--){
targetCell = $("#tbl").find("tr").eq(row-1).find("td").eq(col);
if(startCell.text() == targetCell.text() && startCell.text()!=""){
spanNum++;
targetCell.attr("rowSpan",spanNum);
startCell.remove();
}else{
spanNum =1;
}
startCell = targetCell;
}
}
}
function merge2() { //可實(shí)現(xiàn)合并單元格,上下行來(lái)比較
var totalCols = $("#tbl").find("tr:eq(0)").find("td").length;
var totalRows = $("#tbl").find("tr").length;
for ( var i = totalCols-1; i >= 1; i--) {
for ( var j = totalRows-1; j >= 1; j--) {
startCell = $("#tbl").find("tr").eq(j).find("td").eq(i);
targetCell = $("#tbl").find("tr").eq(j - 1).find("td").eq(i);
if (startCell.text() == targetCell.text() && targetCell.text() != "") {
targetCell.attr("rowSpan", (startCell.attr("rowSpan")==undefined)?2:(eval(startCell.attr("rowSpan"))+1));
startCell.remove();
}
}
}
}
/*先合并,使用style 的display:none將相同元素隱藏,然后再remove
*/
function merge3(){
var totalCols = $("#tbl").find("tr:eq(0)").find("td").length;
var totalRows = $("#tbl").find("tr").length;
for(var col=totalCols-1;col>=1;col--){
spanNum =1;
startCell = $("#tbl").find("tr").eq(totalRows-1).find("td").eq(col);
for(var row = totalRows-1;row>=1;row--){
targetCell = $("#tbl").find("tr").eq(row-1).find("td").eq(col);
if(startCell.text() == targetCell.text() && startCell.text()!=""){
spanNum++;
targetCell.attr("rowSpan",spanNum);
startCell.attr("style","visibility:hidden");
// startCell.attr("style","display:none");
}else{
spanNum =1;
}
startCell = targetCell;
}
}
for(var j=totalCols-1;j>=1;j--){
for(var i=totalRows-1;i>=1;i--){
cell = $("#tbl").find("tr").eq(i).find("td").eq(j);
if(cell.attr("style")!=undefined){
if(cell.attr("style")=="visibility:hidden"){
cell.remove();
}
}
}
}
}
function merge4(){ //與merge3方法類似,目的是看一下 display:none與visibility:hidden的效果區(qū)別
var totalCols = $("#tbl").find("tr:eq(0)").find("td").length;
var totalRows = $("#tbl").find("tr").length;
for(var col=totalCols-1;col>=1;col--){
spanNum =1;
startCell = $("#tbl").find("tr").eq(totalRows-1).find("td").eq(col);
for(var row = totalRows-1;row>=1;row--){
targetCell = $("#tbl").find("tr").eq(row-1).find("td").eq(col);
if(startCell.text() == targetCell.text() && startCell.text()!=""){
spanNum++;
targetCell.attr("rowSpan",spanNum);
startCell.attr("style","display:none");
// startCell.attr("style","display:none");
}else{
spanNum =1;
}
startCell = targetCell;
}
}
for(var j=totalCols-1;j>=1;j--){
for(var i=totalRows-1;i>=1;i--){
cell = $("#tbl").find("tr").eq(i).find("td").eq(j);
if(cell.attr("style")!=undefined){
if(cell.attr("style")=="display:none"){
cell.remove();
}
}
}
}
}
</script>
</head>
<body>
<table id="tbl" cellpadding="3" border=1>
<thead>
<tr>
<td>銷售時(shí)間</td>
<td>裙子</td>
<td>褲子</td>
<td>風(fēng)衣</td>
<td>鞋子</td>
</tr>
</thead>
<tbody>
<tr>
<td>8:00-9:00</td>
<td>3</td>
<td></td>
<td>4</td>
<td></td>
</tr>
<tr>
<td>9:00-10:00</td>
<td>3</td>
<td>2</td>
<td>5</td>
<td>3</td>
</tr>
<tr>
<td>10:00-11:00</td>
<td>3</td>
<td>2</td>
<td></td>
<td>1</td>
</tr>
<tr>
<td>11:00-12:00</td>
<td></td>
<td></td>
<td></td>
<td>1</td>
</tr>
</tbody>
</table>
<input type="button" value="合并" id="merge" onclick="merge2();">
</body>
</html>
總結(jié):在使用remove的時(shí)候,一定要注意如果 從list的開(kāi)始元素循環(huán)下去,remove掉一個(gè)元素后,有些元素就找不到了或者說(shuō)不是要找的那個(gè)元素;最好是從后面開(kāi)始循環(huán)。
您可能感興趣的文章:
- 基于JQuery實(shí)現(xiàn)相同內(nèi)容合并單元格的代碼
- 基于jquery的合并table相同單元格的插件(精簡(jiǎn)版)
- jquery 動(dòng)態(tài)合并單元格的實(shí)現(xiàn)方法
- 合并table相同單元格的jquery插件分享(很精簡(jiǎn))
- jquery miniui 教程 表格控件 合并單元格應(yīng)用
- jQuery實(shí)現(xiàn)HTML表格單元格的合并功能
- 基于jQuery的合并表格中相同文本的相鄰單元格的代碼
- 使用jQuery 操作table 完成單元格合并的實(shí)例
- jquery 合并內(nèi)容相同的單元格(示例代碼)
- jquery合并表格中相同文本的相鄰單元格
- jQuery實(shí)現(xiàn)合并表格單元格中相同行操作示例
相關(guān)文章
jQuery使用getJSON方法獲取json數(shù)據(jù)完整示例
這篇文章主要介紹了jQuery使用getJSON方法獲取json數(shù)據(jù),結(jié)合完整實(shí)例形式分析了getJSON方法讀取與遍歷json文件數(shù)據(jù)的相關(guān)技巧,需要的朋友可以參考下2016-09-09jquery判斷復(fù)選框選中狀態(tài)以及區(qū)分attr和prop
這篇文章主要介紹了jquery判斷復(fù)選框選中狀態(tài)以及區(qū)分attr和prop,感興趣的小伙伴們可以參考一下2015-12-12一個(gè)簡(jiǎn)單的動(dòng)態(tài)加載js和css的jquery代碼
動(dòng)態(tài)加載js和css的jquery,可用于在生成頁(yè)面時(shí)通過(guò)js函數(shù)加載一些共通的js和css文件,需要的朋友可以參考下2014-09-09jQuery實(shí)現(xiàn)的輸入框選擇時(shí)間插件用法實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的輸入框選擇時(shí)間插件用法,實(shí)例分析了jQuery插件jquery.settime.js的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02JQuery操作tr和td內(nèi)容的方法實(shí)例
本文介紹了“JQuery操作tr和td內(nèi)容的方法實(shí)例”,需要的朋友可以參考一下2013-03-03jquery select操作的日期聯(lián)動(dòng)實(shí)現(xiàn)代碼
是很簡(jiǎn)單的代碼 不過(guò)我自己操作的時(shí)候才發(fā)現(xiàn)我自己還有很多不懂,要多實(shí)際應(yīng)用才發(fā)現(xiàn)問(wèn)題,哎~~2009-12-12jQuery.cookie.js實(shí)現(xiàn)記錄最近瀏覽過(guò)的商品功能示例
這篇文章主要介紹了jQuery.cookie.js實(shí)現(xiàn)記錄最近瀏覽過(guò)的商品功能,結(jié)合實(shí)例形式分析了基于jQuery.cookie.js插件創(chuàng)建cookie及保存瀏覽記錄的操作技巧,需要的朋友可以參考下2017-01-01