让用户选择如何显示表格

let the user chose how to display the table

本文关键字：显示 表格 何显示 用户 选择      更新时间：2023-09-26

我有一个表，我希望用户选择如何在不转到另一个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>

我将为第一个视图和第二个视图创建一个按钮。。问题是我不知道如何将内容从一个更改为另一个。。他们的代码能做到这一点吗？它是什么？以及如何使用它？

提前感谢您的帮助：）

您可以这样做：fiddle

将内容包装为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()  
}

您必须为表分配一个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");});
相关文章：