2009-08-18 24 views
40

Mam prostą strukturę tabeli w ten sposób. Co chciałbym zrobić to dynamicznie scalić kilka kolumn opartych na jakimś stanie w <td> Na przykład, jeśli TD1 i TD3 są puste, a następnie scalić komórki i robić <td class="col1" colspan="3">1Meeting</td> Próbowałem gry z jQuery przy użyciu:Ustaw dynamicznie colspan za pomocą jquery

$(".tblSimpleAgenda td:contains('')").hide(); 

ale nie przyniosło to efektu.

Jaki byłby najlepszy sposób korzystania z jquery, aby to osiągnąć.

<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> 

Odpowiedz

72

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

  1. istnieje jako właściwość na elemencie (colSpan istnieje jako własność i domyślnie 1 na <td> HTMLElements IE i FireFox)
  2. dokument nie jest xml i
  3. 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ł.

+0

Nie, jQuery # attr ostatecznie ocenia wartość HTMLElement # setAttribute, która nie działa dla colspan w IE. Po prostu całkowicie to ignoruje. –

+0

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. –

+0

@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. –

0

td.setAttribute ('rowspan', x);

+1

IE po prostu całkowicie ignoruje go, jeśli to zrobisz, które inaczej byłyby poprawne. Musisz ustawić colspan jako właściwość, np. TheCell.colspan = 4; –

2

Powiedziałeś, że w twoim tytule występuje spacja, ale mam wrażenie, że masz na myśli colspan; przepraszam, jeśli poniżej jest wyłączona, bo mam to źle.

trzeba by usunąć pusty element, komórka tabeli całkowicie i zmień atrybut colspan na inną komórkę w wierszu obejmuje zwolnionego miejsca, np

refToCellToRemove.remove(); 
refTocellToExpand.colspan = 4; 

Należy pamiętać, że ustawienie go poprzez setAttribute (który w przeciwnym razie byłby poprawny) nie zadziała poprawnie w IE.

Uwaga: IE robi bardzo dziwne ustawienia układu tabeli, gdy dynamicznie przechodzisz przez colspany. Jeśli możesz tego uniknąć, zrobiłbym to.

+0

może działać poprawnie w IE, używając jQuery's attr(), jak pokazano w mojej odpowiedzi –

4

Zaadaptowałem scenariusz z Russ Cam (dziękuję, Russ Cam!) Na moje własne potrzeby: potrzebowałem scalić kolumny o tej samej wartości, a nie tylko puste komórki.

Może to być przydatne dla kogoś innego ... Oto co mam wymyślić:

jQuery(document).ready(function() { 

    jQuery('table.tblSimpleAgenda tr').each(function() { 
    var tr = this; 
    var counter = 0; 
    var strLookupText = ''; 

    jQuery('td', tr).each(function(index, value) { 
     var td = jQuery(this); 

     if ((td.text() == strLookupText) || (td.text() == "")) { 
     counter++; 
     td.prev().attr('colSpan', '' + parseInt(counter + 1,10) + '').css({textAlign : 'center'}); 
     td.remove(); 
     } 
     else { 
     counter = 0; 
     } 

     // Sets the strLookupText variable to hold the current value. The next time in the loop the system will check the current value against the previous value. 
     strLookupText = td.text(); 

    }); 

    }); 

}); 
1

Ja również okazało się, że jeśli miał display: none, potem zmienił go programowo być widoczny , można również ustawić

$tr.css({display:'table-row'}); 

zamiast display: inline lub display: block inaczej komórka może pokazać tylko jako objęcia 1 komórkę, bez względu na to jak duże masz colspan ustawiony.

0

Ustawienie colspan="0" jest obsługiwane tylko w firefox.

W innych przeglądarkach możemy ominąć go z:

// Auto calculate table colspan if set to 0 
var colCount = 0; 
$("td[colspan='0']").each(function(){ 
    colCount = 0; 
    $(this).parents("table").find('tr').eq(0).children().each(function(){ 
     if ($(this).attr('colspan')){ 
      colCount += +$(this).attr('colspan'); 
     } else { 
      colCount++; 
     } 
    }); 
$(this).attr("colspan", colCount); 
}); 

http://tinker.io/3d642/4

Powiązane problemy