使用jquery动态设置colspan [英] Set colspan dynamically with jquery

查看：98
本文介绍了使用jquery动态设置colspan的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I have a simple table structure like this. What I would like to do is to dynamically merge some columns based on some condition within the <td> for example, if td1 and td3 are empty then merge the cells and do <td class="col1" colspan="3">1Meeting</td> I tried playing around with jquery using: 

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

但没有效果。

使用jquery实现这一目标的最佳方法是什么。

What would be the the best way using jquery to achieve this. 

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


推荐答案

怎么样

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

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

I would imagine that to work but have no way to test at the moment. Using .attr() would be the usual jQuery way of setting attributes of elements in the wrapped set.

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

As has been mentioned in another answer, in order to get this to work would require removing the td elements that have no text in them from the DOM. It may be easier to do this all server side

编辑：

As在评论中提到，尝试在IE中使用attr（）设置colspan时有一个错误，但以下在IE6和FireFox 3.0.13中有效。

As was mentioned in the comments, there is a bug in attempting to set colspan using attr() in IE, but the following works in IE6 and FireFox 3.0.13.

工作演示

Working Demo

注意使用属性 colSpan 而不是 colspan - 前者适用于IE和Firefox，但后者适用在IE中不起作用。看看jQuery 1.3.2源代码，如果

notice the use of the attribute colSpan and not colspan - the former works in both IE and Firefox, but the latter does not work in IE. Looking at jQuery 1.3.2 source, it would appear that attr() attempts to set the attribute as a property of the element if


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

  2. 文档不是xml和

  3. 属性是没有href，src或style

  1. it exists as a property on the element (colSpan exists as a property and defaults to 1 on <td> HTMLElements in IE and FireFox)
  2. the document is not xml and
  3. the attribute is none of href, src or style

使用 colSpan 而不是 colspan 与 attr（）一起使用，因为前者是在元素上定义的属性，而后者不是。

using colSpan as opposed to colspan works with attr() because the former is a property defined on the element whereas the latter is not.

attr（）的下降是尝试使用 setAttribute（）在有问题的元素上，将值设置为字符串，但这会导致IE中的问题（jQuery中的错误＃1070）

the fall-through for attr() is to attempt to use setAttribute() on the element in question, setting the value to a string, but this causes problems in IE (bug #1070 in jQuery)

// convert the value to a string (all browsers do this but IE) see #1070
elem.setAttribute( name, "" + value );

在演示中，对于每一行，评估每个单元格中的文本。如果文本是空字符串，则删除单元格并增加计数器。行中没有 class =colTime的第一个单元格的colspan属性设置为计数器的值+ 1（对于它占用的范围）。

In the demo, for each row, the text in each cell is evaluated. If the text is a blank string, then the cell is removed and a counter incremented. The first cell in the row that does not have class="colTime" has a colspan attribute set to the value of the counter + 1 (for the span it occupies itself).

在此之后，对于每一行，单元格中 class =colspans的文本设置为从左到右的行中每个单元格的colspan属性值。

After this, for each row, the text in the cell with class="colspans" is set to the colspan attribute values of each cell in the row from left to right.

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应用到每一行中的第一个非时间单元格），但希望你能得到这个想法。

This is just a demonstration to show that attr() can be used, but to be aware of it's implementation and the cross-browser quirks that come with it. I've also made some assumptions about your table layout in the demo (i.e. apply the colspan to the first "non-Time" cell in each row), but hopefully you get the idea.

这篇关于使用jquery动态设置colspan的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
HTML/CSS最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆