< 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到第一个“非时间”单元格在每一行),但希望你能得到的想法。