如何
$([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