隐藏sql结果列并显示下面的表onClick

Hide column of sql results and and show below table onClick

本文关键字：onClick 显示 sql 结果 隐藏      更新时间：2023-09-26

我有一个显示SQL结果的表，但是我希望该表显示某些结果，并在单击时显示更多，在div标记下的表。到目前为止，我有这个代码显示，"标题"answers"电子邮件"和第三列，这将触发一个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>

编辑:在收到评论后，下面是带有id为"details"的div元素的表的完整代码

<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>

我不确定这是否是你想做的，但你可以尝试这样的东西。我希望这对你有帮助

<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>


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

你是这个意思 看我的小提琴

不使用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';
相关文章：