`
zjb10000
  • 浏览: 142086 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

js 隐藏/显示指定“块”(table、ul...)

    博客分类:
  • jstl
阅读更多
最近在做一个页面显示问时,遇到一个小问题,在一个table中想嵌套table,但是不好看,如果是数据库这样做的话是没办法完成的,好在html还能够做出来,只是效果做不好,所以就想着通过<a href="">来控制再加上js,动态的隐藏显示table。

先来段js代码实现显示和隐藏的功能:
 function display(id){
  if($(id).style.display=="none"){
   $(id).style.display = "block";
  } else{
   $(id).style.display = "none";
  }
 }
 


上面的代码是用来控制传入id样式的现实和隐藏。

下面来段html代码,受js的控制:
 <a href="javascript:void(0)" title="隐藏/显示" onClick="display('1')">隐藏/显示</a>
 <table id="1" style="display">
  <th>标题</th>
  <tr>
   <td>hello world</td>
  </tr>
 </table>

分享到:
评论

相关推荐

    layui将table转化表单显示的方法(即table.render转为表单展示)

    为了将table渲染的数据转换为表单形式,我们需要采用一些JavaScript技术来辅助完成。在本教程中,我们将主要使用Ajax技术和一些jQuery辅助函数。 在上述代码中,首先定义了一个table.render的配置对象,用于初始化...

    【JavaScript源代码】vue打印功能实现的两种方法总结.docx

    Vue.js 是一个流行的前端框架,用于构建用户界面。在 Vue 应用中,有时我们需要实现打印功能,例如打印页面上的特定内容或者整个页面。本文将介绍两种在 Vue 中实现打印功能的方法。 方法一:使用 `vue-print-nb` ...

    JS仿淘宝首页商品分类列表效果

    根据提供的文件信息,我们可以分析并总结出以下几个与“JS仿淘宝首页商品分类列表效果”相关的知识点: ### 一、HTML5文档类型定义 在代码片段的开头,我们看到`&lt;!DOCTYPE ...

    js实现模糊匹配功能

    ul.innerHTML = ""; // 清空当前列表 // 创建新的 li 和 a 元素,添加到列表 for (i = 0; i &lt; matches.length; i++) { li = document.createElement("li"); a = document.createElement("a"); a.href = "#"; ...

    jquery 笔记(自己学习jquery整理好的)

    - `hide()`和`show()`分别用于隐藏和显示元素。 #### 七、动画效果 jQuery还支持简单的动画效果,可以通过链式调用来实现复杂的动画组合。 **淡入淡出效果:** ```javascript $("input:eq(0)").click(function ()...

    jQuery参考手册

    - 示例:`$("table:visible")` 返回所有可见的表格。 #### 三、jQuery事件方法 jQuery提供了多种事件方法来帮助开发者处理各种事件,包括但不限于鼠标、键盘、焦点等相关事件。这些方法可以用于触发事件或者将回...

    freemarker总结

    options:该参数可以省略,指定包含时的选项,包含encoding和parse两个选项,其中encoding指定包含页面时所用的解码集,而parse指定被包含文件是否作为FTL文件来解析,如果省略了parse选项值,则该选项默认是true. ...

    松迪培训入学测试题

    - 定义样式来控制菜单的显示效果,如隐藏子菜单、添加展开/折叠图标等。 3. **JavaScript事件处理**: - 使用JavaScript监听点击事件,控制子菜单的展开和折叠。 4. **示例代码**: ```html &lt;ul&gt; 根节点 ...

    jQuery详细教程

    &lt;script type="text/javascript" src="/jquery/jquery.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); &lt;/script&gt; &lt;/head&gt; ...

    网页设计与制作(HTML+CSS).pdf

    双标记:`&lt;p&gt;`, `&lt;div&gt;`, `&lt;table&gt;`, `&lt;ul&gt;`, `&lt;ol&gt;`等。 - 34. 通栏布局(Full-Width Layout)是指网页内容跨越整个屏幕宽度,不设固定边距,通常用于创建更现代、更宽广的视觉体验。这种布局常常使用百分比宽度而...

    html入门到放弃笔记

    1、src :指定要显示图像的 URL 2、width :图像的宽度 3、height :图像的高度 4、title :鼠标悬停时,要显示的文本 Demo : 1、将 学子网的 logo 下载下来 2、显示在自己的网页中 3、超链接 1、语法 ...

    Using CSS Friendly Menu Control Adapter in C# 源码

    在默认情况下,ASP.NET的内置导航控件会生成嵌套的`&lt;span&gt;`和`&lt;table&gt;`元素,这对于实现复杂的CSS样式控制并不友好。`CSS Friendly Adapter`则解决了这个问题,它将这些控件的输出转换为`&lt;ul&gt;`和`&lt;li&gt;`元素,这些...

    HTML面试题

    - `&lt;ul&gt;`: 无序列表。 - **行内元素** (Inline Elements): - `&lt;a&gt;`: 锚点链接。 - `&lt;abbr&gt;`: 缩写。 - ` `: 换行。 - `&lt;img&gt;`: 图像。 - `&lt;input&gt;`: 输入框。 - `&lt;label&gt;`: 表单标签。 - `&lt;select&gt;`: ...

    JQuery_html总结.pdf

    - **文件名**: 当前文件所在目录的文件,等同于`./文件名`;`.`可省略。 - **绝对路径**: - 正确格式为:`http://ip:port/工程名/资源路径`。 **4. 表格** - **`&lt;table&gt;`标签**: 创建表格。 - **`align`属性**: ...

    HTML的常见标签.docx

    未在此详细展开的还有图像部分(如`&lt;img&gt;`标签),音频部分(如`&lt;audio&gt;`标签),链接部分(如`&lt;a&gt;`标签的`href`属性),列表部分(`&lt;ul&gt;`、`&lt;ol&gt;`、`&lt;li&gt;`标签),以及表格部分(`&lt;table&gt;`、`&lt;tr&gt;`、`&lt;th&gt;`、`&lt;td&gt;`...

    HTML常用标签以及常用技巧等说明

    - `&lt;marquee&gt;`:创建滚动的文字或图像,可以指定方向、行为、循环次数等。 ##### 12. 图片标签 - `&lt;img&gt;`:用于嵌入图片,`src`属性定义图片来源,`width`和`height`定义尺寸。 - 示例:`&lt;img src="image.jpg" ...

    《计算机应用基础2-网页制作》(完整).pdf

    21. **DW的快捷键**如Ctrl+C/V/Paste(复制/粘贴/查找与替换),Ctrl+Z(撤销),Ctrl+X(剪切),F12(预览),F8(显示/隐藏面板)等。 22. **建立站点目录结构**要逻辑清晰,便于管理和维护,`IMG`目录用于存放...

    div+css技巧

    - **表格标签的使用**:在使用`&lt;table&gt;`标签时,需要注意其各种属性的正确设置,以确保表格的正常显示。 - 示例代码: ```html &lt;table&gt; 内容&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; ``` - **脚本标签的language属性**:在...

    韩顺平html,div+css视频听讲笔记

    此外,还可以使用隐藏域 (`&lt;input type="hidden"&gt;`) 来传递额外的数据,这些数据不会显示给用户但会被服务器接收。例如: ```html &lt;input type="hidden" name="data" value="ok" /&gt; ``` 总结起来,韩顺平的HTML...

    使用nodejs下载风景壁纸

    首先,我们需要了解Node.js的基础,它是一个基于Chrome V8引擎的JavaScript运行环境,允许我们在服务器端执行JavaScript代码。 为了实现下载壁纸的功能,我们将利用几个第三方模块: 1. **superagent**: 这是一个...

Global site tag (gtag.js) - Google Analytics