使用 jquery、php 和 mysql 获取详细信息？答案

【问题标题】：get details with jquery, php and mysql?使用 jquery、php 和 mysql 获取详细信息？
【发布时间】：2015-09-12 07:31:15
【问题描述】：

当我们点击候选人时，从 mysql db 中获取详细信息。如果我点击第一个候选人，我想查看第一个候选人的详细信息，如果我点击第二个，我将看到第二个候选人的详细信息。请与我分享代码如何使用 jquery、php 和 mysql 获取详细信息？我想列出候选人。当我们点击候选人时，我想在右侧窗口中查看候选人的详细信息。

【问题讨论】：

这很好......你的想法很好......但是你已经为它实现了什么？
添加您尝试的任何代码，我们在这里解决您的错误，而不是为您完成整个代码。希望你能理解！
当我们点击任何一个候选人时，我想在左侧显示候选人，右侧我们需要显示候选人的详细信息。

标签： php jquery mysql

【解决方案1】：

创建一个 php 脚本以从 MySQL 数据库中读取详细信息
从 MySQL 检索数据后，使用 Json 或 xml 并使用 echo 响应详细信息
在 UI 项的 On click 事件处理程序中，进行 Ajax 调用并将候选标识符发送到您的 php 脚本，然后解析发送的响应
根据收到的数据更新 UI 组件。

【讨论】：

【解决方案2】：

你可以这样试试：-

将一个类作为标题行的标题，并使用 nextUntil 获取单击的标题下方的所有行，直到下一个标题。

$('.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

如果是动画切换，您还可以在切换完成后使用 Promise 切换跨度图标/文本。

$('.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

【讨论】：