let the user chose how to display the table

Question

I have a table and I want the user to pick how to view the table WITHOUT going to another url .. I want it all to be done by javascript and jquery

there is two types of view one is with pictures, the other is without pictures

the code for the the one with pictures is :

<ul>
<li style="float:right;"><img src="{$pictureurl}"/></li>
<li> {$sometext}</li>
<li>{$sometext}</li>
<li>{$sometext}</li>   
</ul>

and the code for the non picture looks something like this :

<table>
<tr>
<th>{sometext}</th>
<th>{sometext}</th>
<th>{sometext}</th>
</tr>
<tr>
<td >{$sometext}</td>
<td >{$sometext}</td>
<td >{$sometext}</td>
</tr>
</table>

I am going to create to buttons one for the first view and one for the second view.. the problem is I do not know how to change the content from one to another.. is their a code that does this? what is it? and how to use it?

Thanks in advance for helping me :)

Answer 1

Wrap your content a DIV, then change the visibility of the DIV.

<div id="photos" style="display:none">   <-- this one starts off hidden
...your content..
</div>

<div id="nophotos">    <-- this one starts off visible
...your content..
</div>

<input type="button onclick="showPhotos()" value="show photos">
<input type="button onclick="hidePhotos()" value="hide photos">

JS:

function showPhotos() {
       $('#photos').show()
       $('#nophotos').hide()  
}

function hidePhotos() {
       $('#photos').hide()
       $('#nophotos').show()  
}

Answer 2

您可以执行以下操作： 提琴

Answer 3

you have to assign an id for your table and then you can call this jquery :

   $("[Your Table ID]  img").css("displaye":"none");

you can use toggle to show you picture again:

 $("#btn").toggle(function(){$("[Your Table ID]  img").css("displaye":"none");};function(){$("[Your Table ID]  img").css("displaye":"inline");});