Question

我有一个像这样的简单表结构。我想做的是根据<td>中的某些条件动态合并某些列，例如，如果td1和td3为空，则合并单元格并执行 <td class="col1" colspan="3">1Meeting</td> 我尝试使用jquery来玩：

 $(".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>

Answer 1

怎么样

$([your selector]).attr('colspan',3);

我想这会工作但目前无法测试。使用.attr()将是在包装集中设置元素属性的常用jQuery方法。

正如另一个答案中所提到的，为了使其工作，需要从DOM中删除其中没有文本的td元素。在所有服务器端执行此操作可能更容易

修改

正如评论中所提到的，尝试在IE中使用attr（）设置colspan时存在一个错误，但以下内容适用于IE6和FireFox 3.0.13。

<强> Working Demo

注意使用属性colSpan而不是colspan - 前者适用于IE和Firefox，但后者在IE中不起作用。查看jQuery 1.3.2源代码，attr()似乎试图将属性设置为元素的属性，如果

它作为元素的属性存在（colSpan作为属性存在，并且在IE和FireFox的<td> HTMLElements上默认为1

该文档不是xml和

该属性不是href，src或style

使用colSpan而不是colspan与attr()一起使用，因为前者是在元素上定义的属性，而后者则不是。{/ p>
attr()的堕落是尝试在有问题的元素上使用setAttribute()，将值设置为字符串，但这会导致IE中的问题（jQuery中的错误＃1070）< / p>
// 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应用到每行中的第一个“非时间”单元格），但希望你能得到这个想法。

Answer 2

我根据自己的需要调整了Russ Cam的脚本（谢谢你，Russ Cam！）：我需要合并任何具有相同值的列，而不仅仅是空单元格。

这可能对其他人有用......以下是我的想法：

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();

    });

  });

});

Answer 3

你在标题中说过了rowspan，但我得到的印象是你的意思是colspan;如果下面因为我错了，请道歉。

您需要完全删除空白表格单元格，并更改行中另一个单元格的colspan属性以包含已释放的空间，例如：

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

请注意，通过setAttribute设置它（否则会正确）将无法在IE上正常工作。

注意：当你动态地使用colspans时，IE会做一些非常奇怪的表格布局。如果你能避免它，我会的。

Answer 4

我还发现如果你有display：none，那么以编程方式将其更改为可见，你可能还需要设置

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

而不是显示：inline或display：block，否则单元格可能只显示为占用1个单元格，无论colspan设置为多大。

Answer 5

td.setAttribute（ '行跨度'，X）;

Answer 6

仅在firefox中设置colspan="0"。

在其他浏览器中，我们可以通过以下方式解决这个问题：

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

使用jquery动态设置colspan

6 个答案: