Как смоделировать строку таблицы HTML с несколькими столбцами с одним div? - PullRequest
Новая
       45

Как смоделировать строку таблицы HTML с несколькими столбцами с одним div?

0 голосов
/ 29 января 2012

Я делаю веб-страницу, где данные из базы данных помещаются в таблицу.Каждая строка имеет 3 столбца.Я хочу, чтобы каждая строка была кликабельной, однако это невозможно, поскольку вы не можете инкапсулировать строку таблицы с помощью привязки.Есть несколько решений, но я хочу пропустить эти приемы и использовать div в качестве строк.В каждом div я могу поместить три плавающих блока inline-block в виде столбцов, чтобы получить одинаковый результат.Но есть ли способ избежать 3-х столбцов в этом примере?Всего один div для каждой строки с 3 текстовыми частями (столбцы в документах), выровненными по вертикали, как в обычной HTML-таблице?Я отчаянно пробовал str_pad в PHP, и это решает другую проблему.

1 Ответ

1 голос
/ 02 февраля 2012

Мехмед, Попробуйте это ...

[HTML] 

<div id="row1" class="rows">
 <div class="cols col1"></div>
 <div class="cols col2"></div>
 <div class="cols col3"></div>
 <div class="cleaner"></div>
</div><!--end row1-->

<div id="row2" class="rows rowsAlt">
 <div class="col1"></div>
 <div class="col2"></div>
 <div class="col3"></div>
 <div class="cleaner"></div>
</div><!--end row2-->

[CSS] 

.cleaner{clear: left; line-height: 0; height: 0;} 
.rows{width: 300px; min-height: 25px;}
.rowsAlt{background-color: blue;}

.cols{height: 100%; float: left;}
.col1{width: 25px;}
.col2{width: 50px;}
.col3{width: 100px;}

Затем в JQuery вы можете просто выполнить событие щелчка в классе строк и получить его идентификатор для обхода его дочерних элементов. Это делает весь ряд кликабельным. Вы также можете сделать что-нибудь с колонками, если хотите.

[JQuery] 

$('.rows').live("click", function(){ 
  var thisID = $(this).attr('id');

  alert(thisID);
  //now that you have the id, you can traverse that specific row
});

Это должно быть хорошим началом для тебя, Мехмед ...

...