Скрыть столбец sql-результатов и показать ниже таблицу onClick

Question

У меня есть таблица, в которой отображаются результаты 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> 

EDITED: После комментария я получил, вот весь мой код таблицы с сНом элементом с идентификатором «деталью»

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

Answer 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(); 
    }); 
}); 

---

UPDATE

Вы имеете в виду это нравится SEE MY FIDDLE

Answer 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';