2009-08-18 938 views
40

我有一个像这样的简单表结构。我想这样做是动态合并基础上,<td>例如内的一些条件的某些列,如果TD1和TD3都是空的,则合并的单元格,并做 <td class="col1" colspan="3">1Meeting</td> 我试着用用jQuery玩弄:用jQuery动态设置colspan

$(".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> 

回答

72

如何

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

我可以想象到工作,但也没有办法在目前进行测试。使用.attr()将是常用的jQuery设置封装集中元素属性的方式。

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

编辑:

正如在评论中提到的,在尝试设置列跨度使用ATTR()在IE中,一个错误,但在下面的作品IE6和FireFox 3.0.13。

Working Demo

通知使用属性colSpan,而不是colspan - 在IE和Firefox以前的作品,但后者没有在IE浏览器。看看jQuery 1.3。2源,它会出现attr()尝试设置的属性作为元素的属性如果

  1. 它存在作为元件上的属性(colSpan存在如在IE中的属性,缺省值为1上<td> HTML元素和火狐)
  2. 文档不是XML和
  3. 属性是没有HREF,SRC或风格
使用 colSpan,而不是 colspan作品与 attr() b

因为前者是元素上定义的属性,而后者则不是。

落式通过对attr()是尝试所讨论的元件上使用setAttribute(),将该值设置为一个字符串,但是这会导致问题在IE(错误#1070中的jQuery)

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

在在演示中,对于每行,评估每个单元格中的文本。如果文本是空白字符串,则该单元格被删除并且计数器递增。该行中的第一小区不具有class="colTime"具有跨度属性设置到计数器+ 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应用于每行中的第一个“非时间”单元格),但希望您能明白。

+0

演示不,jQuery#attr最终评估为HTMLElement#setAttribute,它不适用于IE上的colspan。它完全忽略它。 – 2009-08-18 16:50:29

+0

谢谢拉斯,稍作修改我得到它的工作,不幸的是一些更多的条件被添加,所以现在我使用服务器端asp.net和jQuery混合处理问题。 – 2009-08-19 15:57:50

+0

@Terry - 没问题!我个人认为,在服务器端,使用TableCell,TableRow等“Table”类以及以这种方式构建要在HTML中呈现的表可以更好地处理这个问题。使用循环和列表,可以很容易地设置colspan属性,无论哪个TableCells需要它 – 2009-08-19 16:03:02

0

td.setAttribute('rowspan',x);

+1

IE只是完全忽略它,如果你这样做,否则是正确的。您必须将colspan设置为属性,例如theCell.colspan = 4; – 2009-08-18 16:51:00

2

你在标题中说过rowspan,但我得到的印象是你的意思是colspan;如果因为我弄错了,下面的内容关闭了,我表示歉意。

你需要彻底删除空白表格单元格元素,改变其他小区的跨度属性的行中包括释放空间,如:

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

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

请注意:IE浏览器会动态地使用colspans来做一些非常奇怪的表格布局操作。如果你能避免它,我会的。

+0

它可以正常工作在IE浏览器中使用jQuery的attr()如我的回答 – 2009-08-18 22:25:05

4

我已经适应从拉斯凸轮脚本(谢谢你,拉斯凸轮!)我自己的需求:我需要合并是有同样的价值,而不仅仅是空单元格的列。

这可能是别人有用......这是我想出了:

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(); 

    }); 

    }); 

}); 
1

我还发现,如果你有显示:没有,然后以编程方式改变了它是可见,你可能还需要设置

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

,而不是显示:内联或显示:块,否则电池可能只显示为占用1个细胞,不管你多大有合并单元格设置为。

0

设置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