Подтвердить что ты не робот

Динамический набор colspan с помощью jquery

У меня есть простая структура таблицы, подобная этой. То, что я хотел бы сделать, это динамически объединить некоторые столбцы на основе некоторого условия в <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>
4b9b3361

ОТВЕТЫ

Ответ 1

Как насчет

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

Я бы предположил, что работать, но не имеет способа проверить на данный момент. Использование .attr() будет обычным способом jQuery установки атрибутов элементов в завернутом наборе.

Как уже упоминалось в другом ответе, для того, чтобы заставить это работать, потребуется удалить элементы td, которые не имеют в них текста из DOM. Это может быть проще сделать на всей стороне сервера

EDIT:

Как упоминалось в комментариях, есть ошибка при попытке установить colspan с использованием attr() в IE, но в IE6 и FireFox 3.0.13 работает следующее.

Рабочий демонстрационный пример

Обратите внимание на использование атрибута colSpan, а не colSpan - первое работает как в IE, так и в Firefox, но последнее не работает в IE. Если посмотреть на источник jQuery 1.3.2, то окажется, что attr() пытается установить атрибут как свойство элемента, если

  • он существует как свойство для элемента (colSpan существует как свойство и по умолчанию имеет значение 1 на <td> HTMLElements в IE и FireFox)
  • документ не является xml и
  • атрибут не относится к href, src или style

с использованием colSpan в отличие от colSpan работает с attr(), потому что первое является свойством, определенным для элемента, тогда как последнее не является.

провал для attr() заключается в попытке использовать setAttribute() для рассматриваемого элемента, установив значение в строку, но это вызывает проблемы в IE (ошибка # 1070 в jQuery)

// 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 к первой ячейке "не время" в каждой строке), но, надеюсь, вы получите эту идею.

Ответ 2

Я адаптировал script от 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

Вы сказали, что в вашем названии указано значение rowspan, но у меня создается впечатление, что вы подразумеваете colspan; извините, если ниже отключено, потому что я ошибаюсь.

Вам нужно будет полностью удалить элемент ячейки пустой таблицы и изменить атрибут colspan в другой ячейке в строке, чтобы охватить освобожденное пространство, например:

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

Обратите внимание, что установка его с помощью setAttribute (который в противном случае был бы правильным) не будет корректно работать в IE.

Остерегайтесь: IE делает некоторые очень странные таблицы, когда вы гадаете с colspans динамически. Если вы можете избежать этого, я бы сделал.

Ответ 4

Я также обнаружил, что если у вас был дисплей: нет, то программным способом он был бы виден, вам также можно было бы установить

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

а не отображать: встроенный или дисплей: блок, иначе ячейка может отображаться только в том случае, если занимает 1 ячейку, независимо от того, сколько у вас установлено значение colspan.

Ответ 5

td.setAttribute( 'RowSpan', х);

Ответ 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