`

js 通过class值实现 指定 tr 的 隐藏和显示

阅读更多
  经验来自于点点滴滴的实践。
 
  继续记录,留待后用。

  现在纯javascript的东西不知道还有没有人在用,但限于项目的原因,先进一点的jquery无法使用的情况下,也只能用最原始的js来完成了。

  js: 通过class实现 指定tr 的隐藏和显示

  function getElementsByClassName(clsName, tagName,flag) {
    var ClassElements = [];
    selElements = document.getElementsByTagName(tagName);

    for (var i = 0; i < selElements.length; i++) {
        if (selElements[i].className == clsName) {
        if(!flag){
        selElements[i].style.display='none';
        }else{
        selElements[i].style.display = "block";
        }
        }
    }
}

使用:
    1.getElementsByClassName("add","tr",false);  隐藏指定tr
   2.getElementsByClassName("add","tr",true);   显示
0
0
分享到:
评论

相关推荐

    DIV的显示和隐藏.docx

    通过`getElementById`方法,我们可以获取到指定ID的`DIV`元素,然后改变其`style.display`属性来实现显示或隐藏。例如,下面的函数`Layer_HideOrShow`接收一个参数,表示`DIV`的ID,然后根据当前`DIV`的`visibility`...

    JS 实现活动日历代码

    JavaScript(简称JS)是一种广泛用于网页和网络应用的编程语言,尤其在客户端脚本中扮演着重要角色。本文将深入探讨如何使用JS实现一个活动日历功能,包括在日历中添加活动,以及当鼠标悬停在有活动的日期上时,如何...

    jquery treetable完美实现可全打开全隐藏

    接着,通过CDN或本地文件引入`jquery.treetable.js`和对应的CSS文件。在HTML文档的`&lt;head&gt;`部分添加如下代码: ```html &lt;script src="path/to/jquery.js"&gt; &lt;script src="path/to/jquery.treetable.js"&gt; ``` ...

    jQuery实现表格动态修改和隐藏 实例

    本实例将深入探讨如何使用jQuery来实现表格的动态修改和隐藏功能,这对于创建交互式用户界面至关重要。 首先,让我们理解jQuery的核心概念。jQuery通过封装JavaScript API,使得选择元素、操作元素、添加事件监听器...

    IE8下兼容获取class函数

    此外,还展示了如何利用这个函数控制元素的显示与隐藏以及通过事件监听器改变元素背景颜色的具体实现。这些技术点不仅适用于解决兼容性问题,也能帮助开发者更好地理解和掌握前端开发中的一些基本技巧。

    基于Bootstrap实现tab标签切换效果

    当用户点击一个标签链接时,Bootstrap通过JavaScript自动更新`tab-pane`的`class`属性,使其显示或隐藏,从而实现了标签的切换效果。这种交互式的设计使得用户能够轻松地在不同内容之间进行导航,提高了网站的用户...

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

    通过以上分析可以看出,这个项目主要是利用HTML、CSS和JavaScript技术实现一个类似于淘宝首页的商品分类列表效果。其中,HTML负责构建页面结构,CSS用于定义样式,而JavaScript则负责处理用户交互事件(如鼠标悬停)...

    【JavaScript源代码】Bootstrap+Jquery实现日历效果.docx

    为了实现日历效果,我们首先需要在HTML中创建一个基础结构,通常包含一个按钮触发日历的显示和隐藏,以及一个用于显示日历的div。在jQuery中,我们可以监听按钮的点击事件,然后使用Bootstrap的模态(Modal)功能...

    js 图片切换 js 图片切换js 图片切换

    - 编写函数控制图片的显示与隐藏,例如使用`getElementById`获取图片元素,再通过修改其`style.display`属性来实现显示或隐藏。 - 可以添加定时器来实现自动播放的功能。 ### 五、扩展功能与优化建议 - **过渡...

    用JS来控制DIV样式的display属性

    本文将详细介绍如何使用JavaScript(JS)来控制HTML中的DIV元素的`display`属性,从而实现元素的显示与隐藏功能。通过具体实例,帮助读者更好地理解和掌握这一技能。 #### 知识点一:CSS样式中的`display`属性 `...

    easyui 自定义显示列

    在这个示例中,通过`&lt;input&gt;`标签创建了多个复选框,并为每个复选框指定了不同的`value`值,这些值将对应于DataGrid中的列名。此外,还添加了一个按钮来触发显示/隐藏列的操作。 ##### 3.2 JavaScript逻辑处理 接...

    javascript带箭头的表格排序实例

    在JavaScript编程中,实现带箭头的表格排序是一种常见的需求,尤其在数据展示和交互式网页设计中。本文将深入探讨如何使用JavaScript实现这一功能,包括理解基础的HTML表格结构、CSS样式设置以及JavaScript事件处理...

    js调用ie打印和预览功能

    在Internet Explorer(IE)浏览器中,可以通过JavaScript与ActiveX控件结合来实现这些功能。下面将详细介绍如何利用JavaScript来调用IE浏览器的打印和预览功能。 #### 一、页面结构搭建 为了能够使用IE的打印和...

    js实现表格筛选功能

    这个功能允许用户通过输入关键字来快速查找和显示表格中符合特定条件的行。在本文中,我们将深入探讨如何利用JavaScript来完成这一功能。 首先,我们需要理解HTML结构。在这个例子中,表格由多个`&lt;tr&gt;`元素组成,...

    JSP页面实现合并单元格

    ### JSP页面实现合并单元格知识点详解 #### 一、背景介绍 ...总结,通过以上内容的学习和实践,我们可以掌握如何在JSP页面上利用JavaScript实现单元格的动态合并,并进一步提升Web应用的用户体验。

    JavaScript Table行定位效果

    最后我用的方法是新建一个table,并把源tr克隆到新table中,然后通过对新table定位来实现效果。 用这个方法关键有两点,首先要做一个仿真度尽可能高的tr,还有是要准确的定位,这些请看后面的程序说明。 程序说明 ...

    juqery 学习之三 选择器 可见性 元素属性

    - **基本选择器**:jQuery 支持基本的 CSS 选择器,如 `$("#id")` 选择 ID 为指定值的元素,`$(".class")` 选择类名为指定值的元素,`$("tagname")` 选择指定标签名的所有元素。 - **层次选择器**:例如 `$("....

    用js实现网页上模仿桌面右键菜单

    ### 使用JavaScript实现网页上的桌面右键菜单功能 在现代网页开发中,为了提供更好的用户体验以及增强网站的功能性,开发者常常需要模拟一些常见的操作系统行为。其中一个典型的应用场景就是在网页上实现类似桌面...

    jquery实现的鼠标滚动调整设置input表格表单内容的特效源码.zip

    例如,`$("input")`会选择所有input元素,`$("#id")`会选择ID为指定值的元素,`$(".class")`会选择所有具有特定类名的元素。在本例中,可能涉及到`$("table tr td input")`这样的选择器,用于选取表格中的input元素...

    Tapestry字典0.1.pdf

    - **实现方式**: 通过JavaScript结合Tapestry API实现弹出框显示校验结果。 - **应用场景**: 实时反馈用户输入的正确性。 **2.5 使用FieldLabel标签** - **功能**: `FieldLabel`标签用于在表单中为输入字段提供标签...

Global site tag (gtag.js) - Google Analytics