Отображать элемент ниже строки в таблице на щелчке
-
10-10-2019 - |
Вопрос
У меня есть таблица, отображающая некоторую информацию. Что я хотел бы сделать, так это позволить пользователю нажимать на строку и иметь примечание, связанное с информацией на этом дисплее строки ниже этой строки.
Я пытаюсь настроить его, чтобы я мог использовать функцию перехода из Nifty CSS, так что просто поместить заметку в скрытую, абсолютно позиционируемую строку под информационной строкой, не говоря уже о вопросе. Переход CSS не действует на position
стиль.
Я настроен, чтобы записка была в div
. Анкет Когда пользователь нажимает строку в таблице, onClick
событие вызывает функцию JavaScript, которая делает div
видимый. Теперь все, что мне нужно, это то, что Div выстраивается под выбранную строку таблицы.
Как я мог получить высоту и позицию строки? Я полагаю, что мог бы использовать это, чтобы позиционировать div
. Анкет Или есть лучший способ сделать это?
Вот пример того, что у меня есть:
<style>
.emarNote{
transition: all .3s linear;
-o-transition: all .3s linear;
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;
}
</style>
<script type="text/javascript">
function showEmar(id)
{
if (document.getElementById("emarNote"+id).style.visibility == "hidden")
{
document.getElementById("emarNote"+id).style.visibility = 'visible';
document.getElementById("emarNote"+id).style.opacity = 1;
}
else
{
document.getElementById("emarNote"+id).style.opacity = 0;
document.getElementById("emarNote"+id).style.visibility = 'hidden';
}
}
</script>
<table>
<tr onClick="showEmar(1)">
<td>Info</td>
<td>Info</td>
</tr>
</table>
<div id="emar1" class="emarNote" style="visibility:hidden; opacity:0; position:absolute;">
note about info
</div>
Решение
1 -й скачать JQueryАнкет Тогда сделайте что -то вроде ниже:
<style>
.emarNote{ background:#CCCCCC; }
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.emarNote').hide();
$('tbody', '#myTable').click(function(event) {
tr_ID = $(event.target).parent().attr('id');
$('#' + tr_ID + '-info').fadeToggle('slow');
});
});
</script>
<table id="myTable">
<tbody>
<tr id="row1">
<td>Info</td>
<td>Info</td>
</tr>
<tr>
<td colspan="2" id="row1-info" class="emarNote">MORE INFO would be really cool and such</td>
</tr>
</tbody>
</table>
Примечание. Замените «Fadetoggle» на «Slidetoggle», чтобы добиться эффекта слайда. Кроме того, я действительно думаю, что вы должны немного прочитать на jQuery, чтобы полностью понять решение. Вы обнаружите, что на самом деле это довольно легко понять, как только вы получите основы.