使用jquery动态设置colspan

前端之家收集整理的这篇文章主要介绍了使用jquery动态设置colspan前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个简单的表结构这样。我想做的是动态合并一些列基于< td>例如,如果td1和td3为空,则合并单元格并执行
< td class =“col1”colspan =“3”> 1Meeting< / td>
我试着用jquery玩:
  1. $(".tblSimpleAgenda td:contains('')").hide();

但它没有效果

什么是使用jquery实现这个的最好的方法

  1. <table class="tblSimpleAgenda" cellpadding="5" cellspacing="0">
  2. <tbody>
  3. <th align="left">Time</th>
  4. <th align="left">Room 1</th>
  5. <th align="left">Room 2</th>
  6. <th align="left">Room 3</th>
  7.  
  8. <tr valign="top">
  9. <td class="colTime">09:00 – 10:00</td>
  10. <td class="col1"></td>
  11. <td class="col2">Meeting 2</td>
  12. <td class="col3"></td>
  13. </tr>
  14.  
  15. <tr valign="top">
  16. <td class="colTime">10:00 – 10:45</td>
  17. <td class="col1">Meeting 1</td>
  18. <td class="col2">Meeting 2</td>
  19. <td class="col3">Meeting 3</td>
  20. </tr>
  21.  
  22. <tr valign="top">
  23. <td class="colTime">11:00 – 11:45</td>
  24. <td class="col1">Meeting 1</td>
  25. <td class="col2">Meeting 2</td>
  26. <td class="col3">Meeting 3</td>
  27. </tr>
  28. </tbody>
  29. </table>

解决方法

怎么样
  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()试图将属性设置为元素的属性if

>它作为元素上的属性存在(colSpan作为属性存在,在IE和FireFox中的< td> HTMLElements上默认为1)
>文档不是xml和
>该属性不是href,src或style

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

attr()的下降是尝试在有问题的元素上使用setAttribute(),将值设置为字符串,但这会导致IE中的问题(在jQuery中的bug#1070)

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

在演示中,对每行,评估每个单元格中的文本。如果文本是空白字符串,则单元格被删除,计数器递增。不具有class =“colTime”的行中的第一个单元格的colspan属性设置为计数器1的值(对于其占用的span)。

之后,对于每行,将具有class =“colspans”的单元格中的文本设置为从左到右的行中每个单元格的colspan属性值。

HTML

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <head>
  5. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  6. <title>SandBox</title>
  7. <Meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  8. <style type="text/css" media="screen">
  9. body { background-color: #000; font: 16px Helvetica,Arial; color: #fff; }
  10. td { text-align: center; }
  11. </style>
  12. </head>
  13. <body>
  14. <table class="tblSimpleAgenda" cellpadding="5" cellspacing="0">
  15. <tbody>
  16. <tr>
  17. <th align="left">Time</th>
  18. <th align="left">Room 1</th>
  19. <th align="left">Room 2</th>
  20. <th align="left">Room 3</th>
  21. <th align="left">Colspans (L -> R)</th>
  22. </tr>
  23. <tr valign="top">
  24. <td class="colTime">09:00 – 10:00</td>
  25. <td class="col1"></td>
  26. <td class="col2">Meeting 2</td>
  27. <td class="col3"></td>
  28. <td class="colspans">holder</td>
  29. </tr>
  30.  
  31. <tr valign="top">
  32. <td class="colTime">10:00 – 10:45</td>
  33. <td class="col1">Meeting 1</td>
  34. <td class="col2">Meeting 2</td>
  35. <td class="col3">Meeting 3</td>
  36. <td class="colspans">holder</td>
  37. </tr>
  38.  
  39. <tr valign="top">
  40. <td class="colTime">11:00 – 11:45</td>
  41. <td class="col1">Meeting 1</td>
  42. <td class="col2">Meeting 2</td>
  43. <td class="col3">Meeting 3</td>
  44. <td class="colspans">holder</td>
  45. </tr>
  46.  
  47. <tr valign="top">
  48. <td class="colTime">11:00 – 11:45</td>
  49. <td class="col1">Meeting 1</td>
  50. <td class="col2">Meeting 2</td>
  51. <td class="col3"></td>
  52. <td class="colspans">holder</td>
  53. </tr>
  54. </tbody>
  55. </table>
  56.  
  57. </body>
  58. </html>

jQuery代码

  1. $(function() {
  2.  
  3. $('table.tblSimpleAgenda tr').each(function() {
  4. var tr = this;
  5. var counter = 0;
  6.  
  7. $('td',tr).each(function(index,value) {
  8. var td = $(this);
  9.  
  10. if (td.text() == "") {
  11. counter++;
  12. td.remove();
  13. }
  14. });
  15.  
  16. if (counter !== 0) {
  17. $('td:not(.colTime):first',tr)
  18. .attr('colSpan','' + parseInt(counter + 1,10) + '');
  19. }
  20. });
  21.  
  22. $('td.colspans').each(function(){
  23. var td = $(this);
  24. var colspans = [];
  25.  
  26. td.siblings().each(function() {
  27. colspans.push(($(this).attr('colSpan')) == null ? 1 : $(this).attr('colSpan'));
  28. });
  29.  
  30. td.text(colspans.join(','));
  31. });
  32.  
  33. });

这只是一个演示,表明可以使用attr(),但要意识到它的实现和跨浏览器的奇怪的来自它。我也在演示中做了一些假设你的表布局(即应用colspan到第一个“非时间”单元格在每一行),但希望你能得到的想法。

猜你在找的jQuery相关文章