2009-08-18 941 views
40

我有一個像這樣的簡單表結構。我想這樣做是動態合併基礎上,<td>例如內的一些條件的某些列,如果TD1和TD3都是空的,則合併的單元格,並做 <td class="col1" colspan="3">1Meeting</td> 我試着用用jQuery玩弄:用jQuery動態設置colspan

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

但它沒有效果。

什麼是最好的方式使用jQuery來實現這一點。

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

回答

72

如何

$([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()嘗試設置的屬性作爲元素的屬性如果

  1. 它存在作爲元件上的屬性(colSpan存在如在IE中的屬性,缺省值爲1上<td> HTML元素和火狐)
  2. 文檔不是XML和
  3. 屬性是沒有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應用於每行中的第一個「非時間」單元格),但希望您能明白。

+0

演示不,jQuery#attr最終評估爲HTMLElement#setAttribute,它不適用於IE上的colspan。它完全忽略它。 – 2009-08-18 16:50:29

+0

謝謝拉斯,稍作修改我得到它的工作,不幸的是一些更多的條件被添加,所以現在我使用服務器端asp.net和jQuery混合處理問題。 – 2009-08-19 15:57:50

+0

@Terry - 沒問題!我個人認爲,在服務器端,使用TableCell,TableRow等「Table」類以及以這種方式構建要在HTML中呈現的表可以更好地處理這個問題。使用循環和列表,可以很容易地設置colspan屬性,無論哪個TableCells需要它 – 2009-08-19 16:03:02

0

td.setAttribute('rowspan',x);

+1

IE只是完全忽略它,如果你這樣做,否則是正確的。您必須將colspan設置爲屬性,例如theCell.colspan = 4; – 2009-08-18 16:51:00

2

你在標題中說過rowspan,但我得到的印象是你的意思是colspan;如果因爲我弄錯了,下面的內容關閉了,我表示歉意。

你需要徹底刪除空白表格單元格元素,改變其他小區的跨度屬性的行中包括釋放空間,如:

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

注意,通過設置的setAttribute它(否則將是正確的)在IE上無法正常工作。

請注意:IE瀏覽器會動態地使用colspans來做一些非常奇怪的表格佈局操作。如果你能避免它,我會的。

+0

它可以正常工作在IE瀏覽器中使用jQuery的attr()如我的回答 – 2009-08-18 22:25:05

4

我已經適應從拉斯凸輪腳本(謝謝你,拉斯凸輪!)我自己的需求:我需要合併是有同樣的價值,而不僅僅是空單元格的列。

這可能是別人有用......這是我想出了:

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

我還發現,如果你有顯示:沒有,然後以編程方式改變了它是可見,你可能還需要設置

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

,而不是顯示:內聯或顯示:塊,否則電池可能只顯示爲佔用1個細胞,不管你多大有合併單元格設置爲。

0

設置colspan="0"是僅支持在Firefox。

在其他瀏覽器中,我們可以避開它:

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