隐藏 sql 结果列并显示下表 onClick答案

【问题标题】：Hide column of sql results and and show below table onClick隐藏 sql 结果列并显示下表 onClick
【发布时间】：2013-06-03 03:57:08
【问题描述】：

我有一个显示 SQL 结果的表，但是我希望该表显示某些结果，并在单击时在 div 标记中的表下方显示更多内容。到目前为止，我有这段代码显示“标题”和“电子邮件”以及第三列，它将触发 JS 函数并在 div 标签中显示“详细信息”...如何使用 JavaScript 显示特定详细信息并隐藏单击第二行详细信息并替换前 1 行时的那些详细信息？

while($rows=mysql_fetch_array($result)){
    ?>
    <tr>
        <td><?php echo $rows['title']; ?></td>
        <td><?php echo $rows['email']; ?></td>
        <td><a href="#" onClick="moreDetails();">More details...</a></td>
    </tr>

编辑：在收到评论后，这是我的表格的完整代码，其中 div 元素的 id 为“details”

<table>
    <tr>
        <td><strong>Investment Title</strong></td>
        <td><strong>Email</strong></td>
        <td><strong>Details</strong></td>
    </tr>

<?php

    // Start looping table row
    while($rows=mysql_fetch_array($result)){
?>
    <tr>
        <td><?php echo $rows['title']; ?></td>
        <td><?php echo $rows['email']; ?></td>
        <td><a href="#" onClick="viewInvestor();">More details...</a></td>
    </tr>
<?php
    // Exit looping and close connection
}
    mysql_close();
?>
    <tr>
</tr>
</table>
<div id="detail"></div>

【问题讨论】：

您在穿上鞋子后尝试穿上袜子：首先描述您想要的表格的 HTML 结构以及在哪种情况下应该隐藏/显示哪些列/div。在你意识到这一点之后，从生成 HTML/JS 的 PHP 代码开始会更容易
谢谢，我已经尝试过编辑代码

标签： php javascript mysql show-hide

【解决方案1】：

我不确定这是否是你想要做的，但你可以尝试这样的事情。我希望这会有所帮助

HTML

<table>
    <tr>
        <td><strong>Investment Title</strong></td>
        <td><strong>Email</strong></td>
        <td><a href='#' id='show_details'>More Details</a></td>
    </tr>
    <tr>
        <td><?php echo $rows['title']; ?></td>
        <td><?php echo $rows['email']; ?></td>
        <td id='details'><?php echo $rows['details'];?></td>
    </tr>
</table>

Javascript - JQuery

$(document).ready(function()
{
    $('#details').hide(); //on ready hide the td details

    $('#show_details').click(function()
    {
        $('#details').show();
    });
});

更新

你的意思是这样的 SEE MY FIDDLE

【讨论】：

我本来打算自己提出这样的建议（+1 击败我） - 使用 HTML 创建数据并简单地隐藏它。然后点击链接显示。
这并不是我所希望的，但我确实明白了……我会尝试扭转局面。谢谢@Þaw
@Felix 我在答案中添加了一个小提琴，请参阅我的小提琴

【解决方案2】：

没有 JQuery：

HTML

<td id='details'>The details are in here...</td>
<td id='details1'>The other details are in here...</td>

Javascript

document.getElementById('details').style.display = 'table-cell';
document.getElementById('details1').style.display = 'none';

【讨论】：