jQuery 合并单元格

Qu_小杭 2010-01-21 05:53:16
有没有做过利用jQuery或者是js实现的合并单元格。就是和excel似地。选中要合并的单元格。点击合并按钮实现合并效果。有的话麻烦奉上demo。。谢谢。
还有就是拖拽效果。（就是说拖拽一个div层放到table单元格内。并记录该层的id。能够存到数据库中。从数据库读取的时候还能够取得到。谢谢）能帮我实现。或者有类似demo的定会重谢。呵呵
...全文
1018 10 打赏 收藏 转发到动态 举报
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
itliyi 2010-04-02
  • 打赏
  • 举报
 回复
wmm88257789 2010-04-02
  • 打赏
  • 举报
 回复
(function($){
/**
* desc : 合并指定表格（表格id为table_id）指定列（列数为table_colnum）的相同文本的相邻单元格
* @table_id 表格id : 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ，此参数应为 #data
* @table_colnum : 为需要合并单元格的所在列.参考jQuery中nth-child的参数.若为数字，从最左边第一列为1开始算起;"even" 表示偶数列;"odd" 表示奇数列; "3n+1" 表示的列数为1、4、7、......
* @table_minrow ? : 可选的,表示要合并列的行数最小的列,省略表示从第0行开始 (闭区间)
* @table_maxrow ? : 可选的,表示要合并列的行数最大的列,省略表示最大行列数为表格最后一行 (开区间)
*/
$.tableSpan = $.tableSpan || {};
$.extend($.tableSpan,{
table_rowspan : function table_rowspan(table_id,table_colnum){
if(table_colnum=="even"){
table_colnum = "2n";
}else if(table_colnum=="odd"){
table_colnum = "2n+1";
}else{
table_colnum = ""+table_colnum;
}
var cols=[];
var all_row_num = $(table_id+" tr td:nth-child(1)").length;
var all_col_num = $(table_id+" tr:nth-child(1)").children().length;
if(table_colnum.indexOf("n")==-1){
cols[0] = table_colnum;
}else{
var n = 0;
var a = table_colnum.substring(0,table_colnum.indexOf("n") );
var b= table_colnum.substring(table_colnum.indexOf("n")+1);
//alert("a="+a+"b="+(b==true));
a = a?parseInt(a):1;
b = b?parseInt(b):0;
//alert(b);
while(a*n+b<=all_col_num){
cols[n] = a*n+b;
n++;
}
}
var table_minrow = arguments[2]?arguments[2]:0;
var table_maxrow = arguments[3]?arguments[3]:all_row_num+1;
var table_firsttd = "";
var table_currenttd = "";
var table_SpanNum = 0;
for(var j=0;j<cols.length;j++){
$(table_id + " tr td:nth-child(" + cols[j] + ")").slice(table_minrow,table_maxrow).each(function(i){
var table_col_obj = $(this);
if(i==0){
table_firsttd = $(this);
table_SpanNum = 1;
}else{
table_currenttd = $(this);
if(table_firsttd.text()==table_currenttd.text()){
table_SpanNum++;
table_currenttd.hide(); //remove();
table_firsttd.attr("rowSpan",table_SpanNum);
}else{
table_firsttd = $(this);
table_SpanNum = 1;
}
}
});
}
},

/**
* desc : 合并指定表格（表格id为table_id）指定行（行数为table_rownum）的相同文本的相邻单元格
* @table_id 表格id : 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ，此参数应为 #data
* @table_rownum : 为需要合并单元格的所在行.参考jQuery中nth-child的参数.若为数字，从最左边第一列为1开始算起;"even" 表示偶数行;"odd" 表示奇数行; "3n+1" 表示的行数为1、4、7、......
* @table_mincolnum ? : 可选的,表示要合并行中的最小列,省略表示从第0列开始(闭区间)
* @table_maxcolnum ? : 可选的,表示要合并行中的最大列,省略表示表格的最大列数(开区间)
*/
table_colspan : function table_colspan(table_id,table_rownum){
//if(table_maxcolnum == void 0){table_maxcolnum=0;}
var table_mincolnum = arguments[2]?arguments[2]:0;
var table_maxcolnum;
var table_firsttd = "";
var table_currenttd = "";
var table_SpanNum = 0;
$(table_id + " tr:nth-child(" + table_rownum + ")").each(function(i){
table_row_obj = $(this).children();
table_maxcolnum = arguments[3]?arguments[3]:table_row_obj.length;
table_row_obj.slice(table_mincolnum,table_maxcolnum).each(function(i){
if(i==0){
table_firsttd = $(this);
table_SpanNum = 1;
}else if((table_maxcolnum>0)&&(i>table_maxcolnum)){
return "";
}else{
table_currenttd = $(this);
if(table_firsttd.text()==table_currenttd.text()){
table_SpanNum++;
if(table_currenttd.is(":visible")){
table_firsttd.width(parseInt(table_firsttd.width())+ parseInt(table_currenttd.width()));
}
table_currenttd.hide(); //remove();
table_firsttd.attr("colSpan",table_SpanNum);
}else{
table_firsttd = $(this);
table_SpanNum = 1;
}
}
});
});
}
});
})(jQuery);
shshshdy 2010-03-29
  • 打赏
  • 举报
 回复
输入几行几列,鼠标点击就各并几行几列
shshshdy 2010-03-29
  • 打赏
  • 举报
 回复 
<!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=gb2312" />

<title>无标题文档</title>

</head>



<body>

<div id="ab">

<table width="200" border="1" cellspacing="0" id="tb1" align="left" style="border:  solid 1px;">

  <tr id="c">

    <td colspan=2 rowspan=3> </td>

    <td colspan=2 rowspan=2> </td>

    <td colspan=2 rowspan=2> </td>

    <td> </td>

 <td> </td>

  </tr>

  <tr id="b">

<td> </td><td> </td>

  </tr>

  <tr>



    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

  </tr>

  <tr>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

  </tr>

  <tr>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

  </tr>

  <tr>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

  </tr>

  <tr>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

  </tr>

  <tr>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

  </tr>

</table></div>

行：<input id = "rows" value="2"/>   列：<input id = "cols" value="2"/>



<script>



  function document.onclick(){ 

  var a,b,c,d,rowNum,cellNum,cellNumP,tempCellNum1,tempCellNum2,maxCell,tempRows,y;

  var   e=window.event.srcElement;

maxCell = 0;   //最大列数

  rowNum=parseInt(document.getElementById("rows").value);    //要求合并的行数

  cellNum=parseInt(document.getElementById("cols").value);   //要求合并的列数

  if (rowNum==0||cellNum==0)

  {

 return;

  }

  cellNumP=0;   //用来保存鼠标点击的行所占列数

  if(e.tagName=="TD"){     

    a=e.parentElement.rowIndex;

 b=e.cellIndex;



//得到表格的最大列数

for (var i=0; i < e.parentElement.parentElement.rows[0].cells.length; i++) {

  maxCell = maxCell + parseInt(e.parentElement.parentElement.rows[0].cells[i].colSpan);

}



for (var i=0; i < e.parentElement.rowIndex; i++) {

 y=0;

 for (var j=0; j<e.parentElement.parentElement.rows[i].cells.length; j++)

 {

  if (e.parentElement.rowIndex-i>=parseInt(e.parentElement.parentElement.rows[i].cells[j].rowSpan))

  {

   y=y+parseInt(e.parentElement.parentElement.rows[i].cells[j].colSpan);

  }

  if (y<=b)

  {

   if (e.parentElement.rowIndex-i<parseInt(e.parentElement.parentElement.rows[i].cells[j].rowSpan))

   {

    cellNumP=cellNumP+parseInt(e.parentElement.parentElement.rows[i].cells[j].colSpan);

   }

  }

 }



}



for (var i=0; i<e.cellIndex; i++)

{

 cellNumP=cellNumP+parseInt(e.parentElement.parentElement.rows[e.parentElement.rowIndex].cells[i].colSpan);

}



if((e.parentElement.parentElement.rows.length-e.parentElement.rowIndex)<rowNum||(maxCell-cellNumP)<cellNum){

alert( "超出行数或者超出列数。" );

return;

}  



//将rowspan>1的进行 行 拆分

for (var i=e.parentElement.rowIndex; i < e.parentElement.parentElement.rows.length; i++) {

tempCellNum2=cellNum;

 for (var j=e.cellIndex; j < e.parentElement.parentElement.rows[i].cells.length; j++) {

 

  if (tempCellNum2>0)

  {

  tempCellNum2 = tempCellNum2 - parseInt(e.parentElement.parentElement.rows[i].cells[j].colSpan);

   if (parseInt(e.parentElement.parentElement.rows[i].cells[j].rowSpan)>1)

   {

   

    e.parentElement.parentElement.rows[i+1].cells[j].colSpan=e.parentElement.parentElement.rows[i].cells[j].colSpan;





     AddCol(e.parentElement.parentElement.rows[i+1]);



   }

   if (parseInt(e.parentElement.parentElement.rows[i].cells[j].rowSpan)>1)

   {

    e.parentElement.parentElement.rows[i+1].cells[j].rowSpan=parseInt(e.parentElement.parentElement.rows[i].cells[j].rowSpan)-1+"";

    e.parentElement.parentElement.rows[i].cells[j].rowSpan="1";

   }

  }



  

 }



}

//如果要合并的列等于表格的最大列数，则直接添加一空行，并删除合并行数一下的行

if (maxCell==cellNum)

{

 AddRow(e.parentElement.parentElement,e.parentElement.rowIndex+rowNum,cellNum);

 tempRows=e.parentElement.rowIndex

 for (i=tempRows+rowNum-1; i>=tempRows; i--)

 {

  e.parentElement.parentElement.parentElement.deleteRow(i);

 }

 return;

}

//将colspan>1的进行 列 拆分

for (var i=e.parentElement.rowIndex; i < e.parentElement.parentElement.rows.length; i++) {

tempCellNum1=cellNum;



 for (var j=e.cellIndex; j < e.parentElement.parentElement.rows[i].cells.length; j++) {



  if (parseInt(e.parentElement.parentElement.rows[i].cells[j].colSpan)>1)

  {

   for (c=parseInt(e.parentElement.parentElement.rows[i].cells[j].colSpan);c>1 ; c-- )

   {

    if (tempCellNum1>0)

    {

     e.parentElement.parentElement.rows[i].insertCell(j+1);

     e.parentElement.parentElement.rows[i].cells[j+1].innerHTML=" ";

    }

   }

   

  }





  tempCellNum1 = tempCellNum1 - 1;

  if (tempCellNum1>=0)

  {

   e.parentElement.parentElement.rows[i].cells[j].colSpan="1";

  }



 }



}

//合并

//删掉除了鼠标点击以外的单元格

for (var i=e.parentElement.rowIndex; i < e.parentElement.rowIndex+rowNum; i++) {



for (var j=e.cellIndex; j < e.cellIndex+cellNum; j++) {



 if(a==i&&b==j){

  //

 }

 else{

  if(e.cellIndex+1<e.parentElement.parentElement.rows[i].cells.length){

   e.parentElement.parentElement.rows[i].deleteCell(e.cellIndex+1);

  }

  

 }

}



}

//将鼠标点击的单元格的colspan和rowspan属性设置为要求合并的数

e.colSpan=cellNum+"";

e.rowSpan=rowNum+"";



}

}



function   AddCol(obj)   

{   

  var   col=document.createElement("td");   

  obj.appendChild(col);   

  col.innerHTML=" ";  

}



function   AddRow(obj,rowNum,cellNum)   

{   

  obj.insertRow(rowNum); 

  obj.rows[rowNum].insertCell(0);

  obj.rows[rowNum].cells[0].colSpan=cellNum+"";

  obj.rows[rowNum].cells[0].innerHTML=" ";  

}



function chk(num){ 

  return num?num%2?"奇数":"偶数":"0" 

}



</script>

</body>

</html>
vip__888 2010-01-22
  • 打赏
  • 举报
 回复
display="none"
用JS影藏你要合并的行试一下
zhong2006 2010-01-22
  • 打赏
  • 举报
 回复
等　级：
结帖率：0.00%
zhong2006 2010-01-22
  • 打赏
  • 举报
 回复
table.removeChild(table.rows[0]);
xohuan 2010-01-22
  • 打赏
  • 举报
 回复
说个思路吧。。
按钮的时候要判断 列数
然后给某个表格加上 colspan=“”
然后移除这个表格之外的东西
ILOVE_ASPNET 2010-01-21
  • 打赏
  • 举报
 回复
好久没做JQ 了顶下。。
Qu_小杭 2010-01-21
  • 打赏
  • 举报
 回复
有没有人来帮一下忙。谢谢了。
jQuery合并单元格
jQuery、JS编写的合并单元格，可以增加、删除、合并单元格
jquery datatable 单元格合并
jquery datatable 单元格合并，通过js实现相同内容单元格动态合并！！！jquery datatable 单元格合并，通过js实现相同内容单元格动态合并！！！
Jquery合并单元格--网摘
Jquery合并单元格--摘自caojin723的博客
jQuery实现合并单元格功能
通过jQuery简单实现的一个合并单元格功能
jquery 动态合并单元格的实现方法
////table中指定行第N列合并单元格(合并后会多出一列，删除N+1单元格即可) var tds = $("#dgList .TableHeader1").find('td'); tds[6].setAttribute("colSpan", "2"); 还可以写成：tds[6].attr("rowSpan", 2);
.NET社区

62,046

社区成员

669,049

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章