Ответ 1
Как насчет
$([your selector]).attr('colspan',3);
Я бы предположил, что работать, но не имеет способа проверить на данный момент. Использование .attr()
будет обычным способом jQuery установки атрибутов элементов в завернутом наборе.
Как уже упоминалось в другом ответе, для того, чтобы заставить это работать, потребуется удалить элементы td, которые не имеют в них текста из DOM. Это может быть проще сделать на всей стороне сервера
EDIT:
Как упоминалось в комментариях, есть ошибка при попытке установить colspan с использованием attr() в IE, но в IE6 и FireFox 3.0.13 работает следующее.
Рабочий демонстрационный пример
Обратите внимание на использование атрибута colSpan
, а не colSpan
- первое работает как в IE, так и в Firefox, но последнее не работает в IE. Если посмотреть на источник jQuery 1.3.2, то окажется, что attr()
пытается установить атрибут как свойство элемента, если
- он существует как свойство для элемента (
colSpan
существует как свойство и по умолчанию имеет значение 1 на<td>
HTMLElements в IE и FireFox) - документ не является xml и
- атрибут не относится к href, src или style
с использованием colSpan
в отличие от colSpan
работает с attr()
, потому что первое является свойством, определенным для элемента, тогда как последнее не является.
провал для 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"
, имеет атрибут 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 к первой ячейке "не время" в каждой строке), но, надеюсь, вы получите эту идею.