Развернуть / свернуть таблицу HTML с помощью <th> использования JQuery
Итак, у меня есть огромная таблица с несколькими заголовками таблиц. Я хочу иметь возможность максимизировать или минимизировать эти заголовки, используя JQuery (или что-то еще работает). Вот пример таблицы:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>
В основном в этом примере я хотел бы, чтобы две кнопки сворачивания / разворачивания взаимодействовали друг от друга (если я нажму одну, другая не изменится).
2 ответа
Вы пробовали это?
http://www.w3schools.com/jquery/jquery_hide_show.asp
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
В основном этот скрипт выше нацелен на id="hide"
поэтому, когда вы нажимаете на элемент id "скрыть", он запускает функцию Jquery и скрывает <p>
элемент.
Тогда точно так же цели id="show"
Просто почитайте об этом, это довольно просто понять.
Вы можете дать идентификатор для таблицы, как показано ниже
<table id="tb1">
Затем вы можете использовать jQuery, чтобы скрыть таблицу по нажатию кнопки
$("button#minimize").click(function(){
$("div#tb1").hide();
})
Точно так же вы можете показать таблицу при нажатии кнопки "Развернуть". Кнопки должны иметь идентификатор maximize
а также minimize
,