如何
$([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()
尝试设置的属性作为元素的属性如果
- 它存在作为元件上的属性(
colSpan
存在如在IE中的属性,缺省值为1上<td>
HTML元素和火狐)
- 文档不是XML和
- 属性是没有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应用于每行中的第一个“非时间”单元格),但希望您能明白。
演示不,jQuery#attr最终评估为HTMLElement#setAttribute,它不适用于IE上的colspan。它完全忽略它。 – 2009-08-18 16:50:29
谢谢拉斯,稍作修改我得到它的工作,不幸的是一些更多的条件被添加,所以现在我使用服务器端asp.net和jQuery混合处理问题。 – 2009-08-19 15:57:50
@Terry - 没问题!我个人认为,在服务器端,使用TableCell,TableRow等“Table”类以及以这种方式构建要在HTML中呈现的表可以更好地处理这个问题。使用循环和列表,可以很容易地设置colspan属性,无论哪个TableCells需要它 –
2009-08-19 16:03:02