Установка класса на HR перерывы TD colspan - PullRequest
Новая
       89

Установка класса на HR перерывы TD colspan

0 голосов
/ 01 сентября 2009

У меня есть расположение вложенных таблиц для отображения данных. Я хочу, чтобы вложенная таблица находилась в TD, который охватывает все столбцы родительской таблицы. Итак, у меня есть набор colspan. Однако я также хочу, чтобы пользователь мог щелкнуть по родительскому элементу, чтобы скрыть / показать дочерние данные. Это отлично работает в IE8, но в FireFox и Chrome вложенная таблица игнорирует colspan и высевается только в первом столбце.

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

Есть мысли?

Спасибо. 

<!DOCTYPE html PUBLIC "-//W3C//thD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/thD/xhtml1-transitional.thd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<script type="text/javascript">
function expandRow(rowID, clickRow)
{
    var item = document.getElementById(rowID);
    if(item.className=='hidden'){
        item.className = 'unhidden';
    }else{
        item.className = 'hidden';
    }
}
</script>
<style type="text/css">
.hidden { display: none; }
.unhidden { display: block; }
</style>
<title>Table Test</title>
</head>
<body>
<table>
  <thead>
    <tr>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
      <th>Col4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="collapsed" onclick="expandRow('id30', this);">Click Here to Expand</td>
      <td>data1</td>
      <td>data2</td>
      <td>data3</td>
    </tr>
    <tr class="hidden" id="id30">
      <td colspan="4">
        <table>
          <tbody>
            <tr>
              <td>data1</td>
              <td>data2</td>
              <td>data3</td>
              <td>data4</td>
              <td>data5</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td class="collapsed" onclick="expandRow('id95', this);">Click Here to Expand</td>
      <td>data1</td>
      <td>data2</td>
      <td>data3</td>
    </tr>
    <tr class="hidden" id="id95">
      <td colspan="4">
        <table>
          <tbody>
            <tr>
              <td>data1</td>
              <td>data2</td>
              <td>data3</td>
              <td>data4</td>
              <td>data5</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td class="collapsed" onclick="expandRow('id96', this);">Click Here to Expand</td>
      <td>This one</td>
      <td>displays ok</td>
      <td>until you set the class!</td>
    </tr>
    <tr id="id96">
      <td colspan="4">
        <table>
          <tbody>
            <tr>
              <td>data1</td>
              <td>data2</td>
              <td>data3</td>
              <td>data4</td>
              <td>data5</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>

Ответы [ 5 ]

1 голос
/ 27 сентября 2010

Я решил, используя эту информацию, просто объявив 

.vis {
    display: block; 
    display: table-row;
}

Старые интернет-исследователи игнорируют table-row. Firefox и Internet Explorer 8 используют его.

1 голос
/ 01 сентября 2009

Полностью избавьтесь от своего скрытого класса - это совершенно излишне. Вместо этого просто удалите скрытый класс из элемента, чтобы он мог вернуться в свое естественное состояние, в этом случае: 

item.className = '';

Но обычно я бы порекомендовал замену: 

item.className = item.className.replace(/\bhidden\b/gi,'');

(и, кстати, лично я нахожу «удаленные» более семантически правильными, чем «скрытые», которые я бы зарезервировал для работы со свойством видимости)

1 голос
/ 01 сентября 2009

изменить строку css на unhidden на: .unhidden { display: table-row; }

блок является недопустимым стилем для trs.

0 голосов
/ 01 сентября 2009

Почему бы вам просто не удалить стилизацию: 

<style type="text/css">
.hidden { display: none; }
.unhidden { }
</style>
0 голосов
/ 01 сентября 2009

только изменить эту часть CSS 

<style type="text/css">
.hidden { display: none; }
.unhidden { display:; }
</style>
...