用jquerydynamic设置colspan

我有这样一个简单的表结构。 我想要做的是dynamic地合并一些基于条件内的条件,例如,如果td1和td3是空的,然后合并单元格,并执行<td class="col1" colspan="3">1Meeting</td>我试着玩jQuery使用:

  $(".tblSimpleAgenda td:contains('')").hide(); 

但没有效果。

什么是最好的方式使用jQuery来实现这一点。

 <table class="tblSimpleAgenda" cellpadding="5" cellspacing="0"> <tbody> <th align="left">Time</th> <th align="left">Room 1</th> <th align="left">Room 2</th> <th align="left">Room 3</th> <tr valign="top"> <td class="colTime">09:00 – 10:00</td> <td class="col1"></td> <td class="col2">Meeting 2</td> <td class="col3"></td> </tr> <tr valign="top"> <td class="colTime">10:00 – 10:45</td> <td class="col1">Meeting 1</td> <td class="col2">Meeting 2</td> <td class="col3">Meeting 3</td> </tr> <tr valign="top"> <td class="colTime">11:00 – 11:45</td> <td class="col1">Meeting 1</td> <td class="col2">Meeting 2</td> <td class="col3">Meeting 3</td> </tr> </tbody> </table> 

怎么样

 $([your selector]).attr('colspan',3); 

我可以想象,工作,但目前无法testing。 使用.attr()将是常用的jQuery方法来设置包装元素的属性。

正如在另一个答案中已经提到的,为了得到这个工作,需要从DOM中删除没有文本的td元素。 这可能会更容易做到这一切的服务器端

编辑:

正如在评论中提到的那样,在IE中尝试使用attr()设置colspan时存在一个错误,但是以下工作在IE6和FireFox 3.0.13中。

工作演示

注意使用属性colSpan而不是colspan – 前者在IE和Firefox中均可使用,但后者在IE中不起作用。 看看jQuery 1.3.2源代码,看起来attr()试图将属性设置为元素的属性

  1. 它作为元素的属性存在( colSpan作为属性存在,在IE和FireFox的HTMLElements中默认为1)
  2. 该文件不是xml和
  3. 该属性不是href,src或style

使用colSpan而不是colspan使用attr()因为前者是在元素上定义的属性,而后者则不是。

attr()的下降是试图在元素上使用setAttribute() ,将值设置为一个string,但这会导致IE中出现问题(jQuery中的bug#1070)

 // convert the value to a string (all browsers do this but IE) see #1070 elem.setAttribute( name, "" + value ); 

在演示中,对于每一行,将评估每个单元格中的文本。 如果文本是一个空白string,那么该单元格被删除,计数器递增。 行中没有class="colTime"的第一个单元格的colspan属性设置为counter + 1的值(对于它占据的跨度)。

在此之后,对于每一行,将class="colspans"的单元格中的文本设置为从左到右的行中每个单元格的colspan属性值。

HTML

 <!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" xml:lang="en" lang="en"> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <title>Sandbox</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <style type="text/css" media="screen"> body { background-color: #000; font: 16px Helvetica, Arial; color: #fff; } td { text-align: center; } </style> </head> <body> <table class="tblSimpleAgenda" cellpadding="5" cellspacing="0"> <tbody> <tr> <th align="left">Time</th> <th align="left">Room 1</th> <th align="left">Room 2</th> <th align="left">Room 3</th> <th align="left">Colspans (L -> R)</th> </tr> <tr valign="top"> <td class="colTime">09:00 – 10:00</td> <td class="col1"></td> <td class="col2">Meeting 2</td> <td class="col3"></td> <td class="colspans">holder</td> </tr> <tr valign="top"> <td class="colTime">10:00 – 10:45</td> <td class="col1">Meeting 1</td> <td class="col2">Meeting 2</td> <td class="col3">Meeting 3</td> <td class="colspans">holder</td> </tr> <tr valign="top"> <td class="colTime">11:00 – 11:45</td> <td class="col1">Meeting 1</td> <td class="col2">Meeting 2</td> <td class="col3">Meeting 3</td> <td class="colspans">holder</td> </tr> <tr valign="top"> <td class="colTime">11:00 – 11:45</td> <td class="col1">Meeting 1</td> <td class="col2">Meeting 2</td> <td class="col3"></td> <td class="colspans">holder</td> </tr> </tbody> </table> </body> </html> 

jQuery代码

 $(function() { $('table.tblSimpleAgenda tr').each(function() { var tr = this; var counter = 0; $('td', tr).each(function(index, value) { var td = $(this); if (td.text() == "") { counter++; td.remove(); } }); if (counter !== 0) { $('td:not(.colTime):first', tr) .attr('colSpan', '' + parseInt(counter + 1,10) + ''); } }); $('td.colspans').each(function(){ var td = $(this); var colspans = []; td.siblings().each(function() { colspans.push(($(this).attr('colSpan')) == null ? 1 : $(this).attr('colSpan')); }); td.text(colspans.join(',')); }); }); 

这只是一个演示,表明可以使用attr() ,但要注意它的实现以及随之而来的跨浏览器的怪癖。 我也在演示中对你的表格布局做了一些假设(比如把colspan应用到每一行的第一个“非时间”单元格),但是希望你能明白这一点。

我已经根据自己的需要调整了Russ Cam的脚本(感谢Russ Cam!):我需要合并具有相同值的所有列,而不仅仅是空单元格。

这可能对其他人有用…下面是我想到的:

 jQuery(document).ready(function() { jQuery('table.tblSimpleAgenda tr').each(function() { var tr = this; var counter = 0; var strLookupText = ''; jQuery('td', tr).each(function(index, value) { var td = jQuery(this); if ((td.text() == strLookupText) || (td.text() == "")) { counter++; td.prev().attr('colSpan', '' + parseInt(counter + 1,10) + '').css({textAlign : 'center'}); td.remove(); } else { counter = 0; } // Sets the strLookupText variable to hold the current value. The next time in the loop the system will check the current value against the previous value. strLookupText = td.text(); }); }); }); 

你在标题中已经说过了rowspan,但是我认为你的意思是colspan。 如果因为我错了,下面是closures的道歉。

您需要完全删除空白表格单元格元素,并更改行中另一个单元格上的colspan属性以包含已发布的空间,例如:

 refToCellToRemove.remove(); refTocellToExpand.colspan = 4; 

请注意,通过setAttribute(否则将是正确的)设置它将无法正常工作在IE浏览器。

注意:当你dynamic地使用colspans时,IE会做一些非常奇怪的表格布局。 如果你能避免它,我会的。

我也发现,如果你有显示:无,然后编程改变它是可见的,你可能也必须设置

 $tr.css({display:'table-row'}); 

而不是显示:inline或display:block,否则无论您设置的colsp有多大,单元格可能只显示为占用1个单元格。

td.setAttribute( '行跨度',X);

设置colspan="0"只支持firefox。

在其他浏览器中,我们可以通过以下方式解决它:

 // Auto calculate table colspan if set to 0 var colCount = 0; $("td[colspan='0']").each(function(){ colCount = 0; $(this).parents("table").find('tr').eq(0).children().each(function(){ if ($(this).attr('colspan')){ colCount += +$(this).attr('colspan'); } else { colCount++; } }); $(this).attr("colspan", colCount); }); 

http://tinker.io/3d642/4