logo标签列表

使用jQuery动态设置colspan

jqueryhtml-table
51

我有一个简单的表格结构，如下所示。我想要做的是根据中的某些条件动态合并一些列，例如，如果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>
6个回答
91

怎么样？

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

我认为这样做是可行的，但目前没有测试的方法。使用.attr()通常是jQuery设置包装集合中元素属性的方式。

正如其他答案中提到的那样，为了使其工作，需要从DOM中删除没有文本的元素。也许在服务器端处理会更容易。

编辑:

如评论中所述，在IE中尝试使用attr()设置colspan存在错误，但以下代码适用于IE6和Firefox 3.0.13。

演示已经可以运行

注意使用属性colSpan而不是colspan——前者在IE和Firefox中都能够工作，而后者在IE中无法工作。查看jQuery 1.3.2源代码，似乎attr()会尝试将属性设置为元素的属性（colSpan在IE和Firefox上的<td>HTMLElements上存在作为属性并默认为1），如果：

  1. 它作为元素的属性存在（colSpan在<td> 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应用于每行中第一个“非时间”单元格），但希望您能明白我的意图。

@Terry - 没问题！我认为个人而言，这可能可以更好地在服务器端处理，使用“Table”类，如TableCell、TableRow，并以此方式构建要呈现的表格。使用循环和List<TableCell>，可以轻松设置需要它的colspan属性的任何TableCell - Russ Cam
4
@Rus Cam - +1非常感谢，你的colSpan和colspan让我免于死亡似的；-) - Topher Fangio
1
td.parent('tr').children('td').not(td) 可以简化为 td.siblings()。 - ErikE
感谢您指出“colSpan而不是colspan”，这帮助了我解决在IE中无法使用knockout属性映射的问题。 - Andreas Rathmayr
我添加了一个 JSFiddle，它是这个示例的实时版本：http://jsfiddle.net/J2cvF/ - Shrout1
显示剩余2条评论
4

我根据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();

    });

  });

});
2

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

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

请注意，通过setAttribute设置它（本来是正确的方法）在IE上无法正常工作。
请注意：当您动态更改colspan时，IE会执行一些非常奇怪的表格布局操作。如果可以避免，建议不要这样做。
它可以使用jQuery的attr()在IE中正常工作，如我的答案所示。 - Russ Cam
1
我发现如果你的元素使用了display:none，然后通过程序改变它的显示状态，你可能还需要设置。
$tr.css({display:'table-row'});

使用display:inline或display:block可能会导致单元格只显示为占用1个单元格，无论你将colspan设置为多大。

0

td.setAttribute('rowspan',x);

1
如果你这样做，IE浏览器会完全忽略它，而这本来是正确的。你必须将colspan设置为属性，例如theCell.colspan = 4; - T.J. Crowder
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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接