【问题标题】:Set colspan dynamically with jQuery使用 jQuery 动态设置 colspan
【发布时间】:2010-11-20 15:49:03
【问题描述】:

我有一个像这样的简单表结构。我想做的是根据<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> 

【问题讨论】:

    标签: jquery html-table


    【解决方案1】:

    怎么样

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

    我认为它可以工作,但目前无法测试。使用 .attr() 将是设置包装集中元素属性的常用 jQuery 方式。

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

    编辑:

    正如 cmets 中所述,尝试在 IE 中使用 attr() 设置 colspan 时存在错误,但以下在 IE6 和 FireFox 3.0.13 中有效。

    Working Demo

    注意colSpan 属性的使用而不是colspan - 前者在 IE 和 Firefox 中都有效,但后者在 IE 中无效。查看 jQuery 1.3.2 源代码,attr() 会尝试将属性设置为元素的属性,如果

    1. 它作为元素上的属性存在(colSpan 作为属性存在,在 IE 和 FireFox 中的&lt;td&gt; HTMLElements 上默认为 1)
    2. 文档不是xml和
    3. 属性不是 href、src 或 style

    使用colSpan 而不是colspan 适用于attr(),因为前者是在元素上定义的属性,而后者不是。

    attr() 的失败是尝试在相关元素上使用setAttribute(),将值设置为字符串,但这会导致 IE 出现问题(jQuery 中的错误 #1070)

    // 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 应用于每行中的第一个“非时间”单元格),但希望你能明白。

    【讨论】:

    • 不,jQuery#attr 最终计算结果为 HTMLElement#setAttribute,这对于 IE 上的 colspan 不起作用。它只是完全忽略它。
    • 感谢 Russ,稍加修改后我就让它工作了,不幸的是,添加了更多条件,所以现在我使用服务器端 asp.net 和 jquery 的组合来处理问题。
    • @Terry - 没问题!我认为就个人而言,这可能会在服务器端使用 TableCell、TableRow 等“表格”类并以这种方式构建要在 HTML 中呈现的表格更好地处理。使用循环和 List,很容易在任何需要它的 TableCell 上设置 colspan 属性
    • @Rus Cam - +1 非常感谢,你的 colSpan 与 colspan 刚刚救了我的命 ;-)
    • td.parent('tr').children('td').not(td)可以折叠成td.siblings()
    【解决方案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();
    
        });
    
      });
    
    });
    

    【讨论】:

      【解决方案3】:

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

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

      请注意,通过 setAttribute 设置它(否则将是正确的)将无法在 IE 上正常工作。

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

      【讨论】:

      • 它可以使用 jQuery 的 attr() 在 IE 中正常工作,如我的回答所示
      【解决方案4】:

      我还发现,如果您有 display:none,然后以编程方式将其更改为可见,您可能还需要设置

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

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

      【讨论】:

        【解决方案5】:

        td.setAttribute('rowspan',x);

        【讨论】:

        • 如果你这样做,IE 会完全忽略它,否则这是正确的。您必须将 colspan 设置为属性,例如 theCell.colspan = 4;
        【解决方案6】:

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

        【讨论】:

          猜你喜欢
          • 2016-06-26
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2015-09-03
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多