Ter*_*der 49 jquery html-table
我有一个像这样的简单表结构.我想做的是根据某些条件动态合并一些列<td>,例如,如果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>
Rus*_*Cam 86
怎么样
$([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的属性存在(作为属性存在,<td>在IE和FireFox中的HTMLElements 上默认为1 )使用colSpan而不是colspan使用attr()因为前者是在元素上定义的属性而后者不是.
直播attr()是尝试使用有setAttribute()问题的元素,将值设置为字符串,但这会导致IE中的问题(jQuery中的错误#1070)
// convert the value to a string (all browsers do this but IE) see #1070
elem.setAttribute( name, "" + value );
在演示中,对于每一行,将评估每个单元格中的文本.如果文本是空字符串,则删除单元格并增加计数器.行中没有的第一个单元格class="colTime"的colspan属性设置为计数器的值+ 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应用到每一行中的第一个"非时间"单元格),但希望你能得到这个想法.