Как расширить ячейку таблицы с помощью JQuery?

Question

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

Я знаю, что это было бы легко с помощью div, но мне нужен табличный макет для даты/названия/и т. Д. Есть ли способ сделать то же самое с таблицами, но в том, что появившееся содержимое включает в себя все ячейки таблицы (фотографии появляются внизу, как если бы все td были объединены в один раз)?

Answer 1

Не совсем уверен, что именно вы пытаетесь сделать, но вы можете использовать дополнительный tr с дисплеем: нет при каждом событии tr. Затем просто переключите его с помощью jQuery.

Answer 2

Я не уверен, но у вас есть что-то вроде

<table> 
    <tr><td>Data</td><td style="display: none;"><img src=""/></td></tr> 
    <tr><td>Data</td><td style="display: none;"><img src=""/></td></tr> 
    <tr><td>Data</td><td style="display: none;"><img src=""/></td></tr> 
    ... 
</table> 

И когда пользователь нажимает на строке, последний дисплей изменения строки в блоке для примера?

Если это правда, вы можете:

$('tr').click(function() { 
    $(this).find('td:last').toggle(); 
});