У меня есть следующие html настройки таблицы
<div>
<table>
<tr>
<td class='plot1'>Some data 1</td>
<td class='plot2'>Some data 2</td>
</tr>
<tr>
<td class='plot3'>Some data 3</td>
<td class='plot4'>Some data 4</td>
</tr>
</table>
</div>
со следующими CSS
.plot1,.plot2,.plot3,.plot4{
width: 50%;
height: 50%;
border: 1px solid red;
}
Двойным щелчком мыши в любой из 4 ячеек таблицы (они будут содержат объекты диаграммы) Я хотел бы расширить эту ячейку, чтобы заполнить родительский div и скрыть остальные 3 ячейки. При последующем двойном щелчке я хотел бы, чтобы таблица имела первоначальные настройки.
Вот jQuery для двойного щелчка на графике 1.
$('td.plot1').dblclick(function(e) {
if (e.ctrlKey) {
if ($(this).closest('table').children('tbody').children('tr').children('td.plot2,td.plot3,td.plot4').is(":visible")) {
$(this).closest('table').children('tbody').children('tr').children('td.plot1').height('100%');
} else {
$(this).closest('table').children('tbody').children('tr').children('td.plot1').height('50%');
}
$(this).closest('table')
.children('tbody')
.children('tr')
.children('td.plot2,td.plot3,td.plot4')
.toggle();
}
});
Рабочий пример выше можно найти здесь .
У меня проблемы с парой вещей. Очевидно, я бы хотел иметь один jQuery для двойного щелчка по любой ячейке таблицы вместо 1 для каждой ячейки. Это поведение работает нормально, пока я не введу объект highcharts в каждую ячейку таблицы, тогда высота щелчкового графика не изменится при попытке «минимизировать» его исходный размер.
Любая помощь или другие подходы будут оценил, как я, кажется, застрял в этой глупой проблеме!