получить детали с jquery, php и mysql?

Question

Когда мы нажимаем на кандидата, получаем данные из mysql db. Если я нажму первый кандидат, я хочу увидеть первые данные о кандидатах, если я нажму 2, я увижу детали второго кандидата. Пожалуйста, поделитесь кодами со мной, как получить детали с jquery, php и mysql? Я хочу перечислять кандидатов. Когда мы нажимаем на кандидата, я хочу видеть детали кандидата в правом боковом окне.

Answer 1

1. Создать скрипт PHP для чтения сведений из базы данных MySQL
2. После извлечения данных из MySQL использовать Json или XML & эхо использования реагировать с деталями
3. В обработчике по щелчку событий UI, выполните вызов Ajax & отправьте идентификатор кандидата в ваш php-скрипт, затем проанализируйте полученный ответ
4. Обновите компоненты пользовательского интерфейса на основе полученных данных.

Answer 2

Вы можете попробовать этот способ: -

Возьмите класс в качестве заголовка к строкам заголовков, и использовать nextUntil, чтобы извлечь все строки под заголовком щелкнули до следующего заголовка.

JS

$('.header').click(function(){ 
    $(this).nextUntil('tr.header').slideToggle(1000); 
}); 

Html

<table border="0"> 
    <tr class="header"> 
    <td colspan="2">Header</td> 
    </tr> 
    <tr> 
    <td>data</td> 
    <td>data</td> 
    </tr> 
    <tr> 
    <td>data</td> 
    <td>data</td> 
    </tr> 

DEMO

Другой пример:

$('.header').click(function(){ 
    $(this).find('span').text(function(_, value){return value=='-'?'+':'-'}); 
    $(this).nextUntil('tr.header').slideToggle(100); // or just use "toggle()" 
}); 

DEMO

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

$('.header').click(function() { 
    var $this = $(this); 
    $(this).nextUntil('tr.header').slideToggle(100).promise().done(function() { 
     $this.find('span').text(function (_, value) { 
      return value == '-' ? '+' : '-' 
     }); 
    }); 
}); 

Или просто с CSS псевдо-элемент для представления знака расширения/коллапса, а просто переключать класс по заголовку.

CSS: -

.header .sign:after{ 
    content:"+"; 
    display:inline-block;  
} 
.header.expand .sign:after{ 
    content:"-"; 
} 

JS: -

$(this).toggleClass('expand').nextUntil('tr.header').slideToggle(100); 

DEMO