Jak o
$([your selector]).attr('colspan',3);
Mogę sobie wyobrazić, że do pracy, ale nie ma sposobu, aby przetestować w tej chwili. Używanie standardu .attr()
byłoby zwykłym sposobem jQuery do ustawiania atrybutów elementów w opakowanym zestawie.
Jak wspomniano w innej odpowiedzi, w celu uruchomienia tej czynności wymagałoby usunięcia elementów td, które nie zawierają żadnego tekstu z DOM. To może być łatwiejsze do zrobienia tej stronie wszystkich serwerów
EDIT:
Jak wspomniano w komentarzach, nie jest to błąd próbując ustawić colspan użyciu attr() w IE, ale następujące prace w IE6 i FireFox 3.0.13.
Working Demo
Zawiadomienie stosowanie atrybutu colSpan
i nie colspan
- dawna działa zarówno w IE i Firefox, ale ten nie działa w IE. Patrząc na jQuery 1.3.2, które, jak się okazuje attr()
próbuje ustawić atrybut jako właściwość elementu jeśli
- istnieje jako właściwość na elemencie (
colSpan
istnieje jako własność i domyślnie 1 na <td>
HTMLElements IE i FireFox)
- dokument nie jest xml i
- atrybut jest żadna href, src lub styl
użyciu colSpan
w przeciwieństwie do colspan
prac z attr()
b ponieważ ten pierwszy jest właściwością zdefiniowaną na elemencie, a ta druga nie.
upadek-through dla attr()
jest próbować używać setAttribute()
na elemencie, o którym mowa, ustawiając wartość na ciąg znaków, ale to powoduje problemy w IE (Bug # 1070 w jQuery)
// convert the value to a string (all browsers do this but IE) see #1070
elem.setAttribute(name, "" + value);
W w wersji demonstracyjnej dla każdego wiersza oceniany jest tekst w każdej komórce. Jeśli tekst jest pustym ciągiem, komórka zostanie usunięta, a licznik zwiększy się. Pierwsza komórka w wierszu, która nie ma wartości class="colTime"
, ma atrybut colspan ustawiony na wartość licznika + 1 (dla zakresu, który zajmuje).
Po tym, dla każdego wiersza, tekst w komórce z class="colspans"
jest ustawiony na wartości atrybutów colspan każdej komórki w rzędzie od lewej do prawej.
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>
kod 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(','));
});
});
Jest to tylko demonstracja, aby pokazać, że attr()
mogą być używane, ale mieć świadomość, że to wdrożenie i dziwactwa cross-browser, które pochodzą z to. Podałem też pewne założenia dotyczące układu twojego stołu w wersji demonstracyjnej (tj. Zastosowałem colspan do pierwszej komórki "nie-Time" w każdym rzędzie), ale mam nadzieję, że wpadłeś na ten pomysł.
Nie, jQuery # attr ostatecznie ocenia wartość HTMLElement # setAttribute, która nie działa dla colspan w IE. Po prostu całkowicie to ignoruje. –
Dzięki Russ, z niewielką modyfikacją dostałem go do pracy, niestety dodano jeszcze kilka warunków, więc teraz używam kombinacji asp.net strony serwera i jquery, aby poradzić sobie z problemem. –
@Terry - nie ma problemu! Sądzę, że osobiście, prawdopodobnie można by to obsłużyć znacznie lepiej po stronie serwera, używając klas "Table", takich jak TableCell, TableRow i budując tabelę do renderowania w HTML w ten sposób. Używając pętli i Listy, łatwo byłoby ustawić atrybut colspan w zależności od tego, które urządzenie TableCell potrzebuje. –