Question

我有一个表，我希望用户选择如何查看表而不使用另一个URL ..我希望所有这些都可以通过javascript和jquery来完成

有两种类型的视图，一种是带图片，另一种是没有图片

带有图片的代码是：

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

并且非图片的代码看起来像这样：

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

我要为第一个视图创建一个按钮，为第二个视图创建一个..问题是我不知道如何将内容从一个更改为另一个..是他们的代码执行此操作吗？它是什么？以及如何使用它？

先谢谢你帮助我:)。

Answer 1

将您的内容包裹为DIV，然后更改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

您可以执行以下操作：fiddle

Answer 3

你必须为你的表分配一个id然后你可以调用这个jquery：

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

您可以使用切换按钮再次显示图片：

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

让用户选择如何显示表格

3 个答案: