У меня есть таблица, в которой отображаются данные на разных уровнях (родительский, дочерний, внук), когда я нажимаю на родителя, он отображает новые строки, относящиеся к дочернему уровню, и если я нажимаю на дочерний элемент, он отображает третий уровень, как внук с большим количеством строк.Добавить действие к кнопке с jQuery
Что я хочу сделать, это добавить кнопку в каждую запись с символом «+», поэтому, когда я нажму на нее, я увижу второй уровень и переключу эту кнопку от родителя к другому с помощью символа «-» , чтобы имитировать функциональность расширения и сворачивания, я хочу сделать это и для дочернего уровня.
Теперь столбцы расширяются или сжимаются, если я нажимаю на строку, но я хочу сделать это, если я нажму на кнопки, которые я хочу добавить.
Вот мой код:
$('.drillDown tr td:last-child, .drillDown tr th:last-child').hide();
$('.drillDown tr td:first-child, .drillDown tr th:first-child').dblclick(function(){
$('.drillDown tr td:last-child, .drillDown tr th:last-child').show();
})
$('table.drillDown').each(function() {
var $table = $(this);
$table.find('.parent').dblclick(function() {
console.log("*****Click on Parent");
$(this).nextUntil('.parent', ".child").toggle("fast");
$(this).nextUntil('.parent', ".grandson").hide("fast");
});
$table.find('.child').dblclick(function() {
console.log("*****Click on child");
$(this).nextUntil('.child', ".grandson").toggle("fast");
});
var $childRows = $table.find('tbody tr').not('.parent').hide();
$table.find('button.hide').dblclick(function() {
$childRows.hide();
});
$table.find('button.show').dblclick(function() {
console.log("*****Click on Child");
$childRows.filter('.child').show();
});
$table.find('tr.child').dblclick(function(){
$(this).nextUntil('.child').show()
});
});
А также моя скрипка с полным примером
https://jsfiddle.net/ny6qcxtd/2/
Спасибо!
Ваша логика идет не так, когда вы нажимаете символ детей. Он отображает - знак вместо знака +. Шаги для получения проблемы 1) нажмите на родительский символ. 2), затем нажмите на дочерний символ. 3), то после clik на родительском символе, чтобы все строки были свернуты. но после этого вы снова нажимаете на родительский символ, отображает дочерний символ - insted из +. проверьте свой jsfiddle. –
@LaljiNakum Спасибо за ваше время, я хотел использовать некоторые причудливые кнопки, но это работает идеально для меня. – kennechu