< 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);
我想象，工作，但目前没有办法测试。使用.attr()将是通常的jQuery方式设置的元素的包装集中的属性。
正如在另一个答案中提到的，为了让这个工作，需要从DOM中删除没有文本的td元素。这可能更容易做到这一点所有服务器端
编辑：
正如评论中提到的，在IE尝试使用attr()设置colspan有一个错误，但下面的工作在IE6和FireFox 3.0.13。
注意使用属性colSpan而不是colspan – 前者在IE和Firefox中都有效，但后者在IE中不起作用。看看jQuery 1.3.2源，看起来attr()试图将属性设置为元素的属性if
>它作为元素上的属性存在(colSpan作为属性存在，在IE和FireFox中的< td> HTMLElements上默认为1)
>文档不是xml和
>该属性不是href，src或style
使用colSpan而不是使用attr()的colspan工作，因为前者是在元素上定义的属性，而后者不是。
attr()的下降是尝试在有问题的元素上使用setAttribute()，将值设置为字符串，但这会导致IE中的问题(在jQuery中的bug#1070)
// convert the value to a string (all browsers do this but IE) see #1070 elem.setAttribute( name,"" + value );
在演示中，对每行，评估每个单元格中的文本。如果文本是空白字符串，则单元格被删除，计数器递增。不具有class =“colTime”的行中的第一个单元格的colspan属性设置为计数器1的值(对于其占用的span)。
之后，对于每行，将具有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到第一个“非时间”单元格在每一行)，但希望你能得到的想法。
