js 实现多行展开收起自动隐藏

最新推荐文章于 2024-08-04 16:33:59 发布
最新推荐文章于 2024-08-04 16:33:59 发布
阅读量464 收藏
点赞数
文章标签： javascript html xhtml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010773181/article/details/127633782
版权

CSDN上的代码都是getElementById只能支持单行隐藏展示，略微修改了下，方便使用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS实现鼠标点击展开/隐藏表格行</title>
</head>
<body>
<script>
function showDetial(id)
{
var detialID = "divc"+id;
var te = document.getElementsByName(detialID);
for(n=0;n<te.length;n++)
{
if(te[n].style.display=="") te[n].style.display="none";
else te[n].style.display="";
}
}
</script>
<table width="760" border="0" cellspacing="0" cellpadding="0">
    <tr onClick="showDetial(1)">
        <td width="760" height="20" bgcolor="#00CCFF">Click Me!</td>
    </tr>
    <tr name = "divc1"  style="display:none">
        <td width="760" height="60"   bgcolor="#9966FF"></td>
    </tr>
    <tr name = "divc1" style="display:none">
        <td width="760" height="60"   bgcolor="#996688"></td>
    </tr>
    <tr onClick="showDetial(3)">
        <td width="760" height="20" bgcolor="#00CCFF">Click Me!</td>
    </tr>
    <tr name = "divc3" style="display:none">
        <td width="760" height="60"   bgcolor="#9966FF"></td>
    </tr>
    <tr onClick="showDetial(4)">
        <td width="760" height="20" bgcolor="#00CCFF">Click Me!</td>
    </tr>
    <tr name = "divc4" style="display:none">
        <td width="760" height="60"   bgcolor="#9966FF"></td>
    </tr>
</table>
</body>
</html>

ZMSc
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue控制多行文字展开收起的实现示例
10-16
在其他Vue组件中，可以通过`需要传递的文字数据"></Spread>`的方式引入这个展开收起组件，其中`需要传递的文字数据`是你要显示的文本。 总的来说，这个实现利用了Vue的响应式系统和CSS的特性，为多行文本提供了一...
vue-ellipsis-text:文字溢出隐藏组件，基于vue编写，用于web表单页面，支持移动端
05-13
一、组件功能支持单行、多行文字溢出显示点点点 or【更多】按钮，如下图所示（对应 App.vue 中的示例）点击【更多】按钮可展开显示所有文字，点击【收起】按钮可收起文字（视具体情况）。二、使用演示三、组件参数及...
Gjosn(围栏列表)
12-05
"列表展开隐藏"可能意味着用户可以动态地展开或收起列表项以查看或隐藏详细信息，这提升了交互性并优化了屏幕空间的使用。 压缩包中的文件列表包括了Android项目的基本组成部分： - `.classpath`和`.project`：这...
javascript经典例子.txt
01-21
- 实现方法：使用HTML和CSS构建菜单结构，并使用JavaScript处理展开和收起逻辑。 - **5.5 两层或多层次的下拉菜单** - 描述：实现具有多级层次结构的下拉菜单。 - 实现方法：使用嵌套的HTML结构，并通过...
css-only-dropdown:仅使用CSS的示例下拉列表
05-10
6. **CSS Transitions**：为了增强用户体验，可能会添加CSS过渡效果，使得下拉菜单的展开和收起更加平滑自然。 此外，项目中包含了`npm install`和`npm run dev`命令，这表明虽然下拉菜单本身是纯CSS实现，但可能...
牛客JS题（二十一）数组扁平化
最新发布
不起眼小菜菜的博客
08-04 625
注释很详细，直接上代码……
Vue3中的pinia的使用及组合写法与普通写法的区别
m0_62626838的博客
07-30 263
1、首先pinia可以自己后面按需安装，也可在项目创建时去勾选安装（这里我使用的是项目创建时自动安装的，吃了点亏，忘记这里是组合写法了）按照这个写法是不需要添加pinia核心（state、actions、getters），但需要return！store文件夹中的counter.ts （名字任起）在组件中直接使用即可，如下图。2、自定义安装pinia。3、在组件中使用，如下图。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 961
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
VUE3自定义指令防止重复点击多次提交
MadSnail00的博客
07-30 333
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
Springboot+Websocket+Security+Vue 实现弹幕推送功能
Gemini1995的博客
08-01 563
【代码】Springboot+Websocket+Security+Vue 实现弹幕推送功能。
django+vue项目-制作一个简单的购物网站
码农在写代码
07-30 366
用django框架制作的一个简易的网站后端学习笔记
【Vue3】自定义组件
又言又语
07-30 470
本文介绍 Vue3 中如何自定义组件。页面组件：用于构建独立页面，通常存放在src/pages或src/views目录下。功能组件：将页面中一些独立的功能封装成独立组件，譬如：分页组件、日期时间组件等。功能组件通常存放在目录下。本文主要说明如何自定义功能组件。
RN高级interview
流星雨的博客
07-31 499
RN高级interview
vite静态资源处理，处理vite项目中src和url路径问题
WanweI897的博客
08-02 414
处理vite项目中src和url路径问题
互联网医院系统源码与医保购药APP开发的完整技术指南
meihusdk的博客
07-30 408
开发过程中需注重数据安全、系统性能、用户体验等多个方面，确保系统的高效稳定运行和良好用户体验。希望这篇技术指南能为开发者提供有益的参考，助力互联网医疗健康行业的发展。
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
努力做最接地气的编程干货分享，感谢关注
07-29 2707
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
linux命令行下使用的浏览器
没刮胡子的程序员专栏
08-01 91
从命令行浏览网页的原因有很多。 命令行工具通常具有丰富的选项和参数，可以根据用户的需求进行调整和配置。这种灵活性使得命令行在自动化和脚本编写方面非常有用。 对于系统管理员来说，命令行是管理和配置服务器的首选方式。通过命令行，管理员可以快速执行各种任务，例如安装软件包、配置网络、管理用户和权限等。与图形界面相比，命令行通常更高效，特别是在处理大量的重复性任务时。 使用Linux命令行浏览器可以提高工作效率，降低系统资源消耗，提高系统的稳定性。
JavaScript 字符串方法2
爱敲代码的卡拉米的博客
07-30 394
方法不会改变调用它的字符串。它返回的是新字符串。正则表达式不带引号,如需替换所有匹配，请使用正则表达式的。所有字符串方法都会返回新字符串。它们不会修改原始字符串。正式地说：字符串是不可变的：字符串不能更改，只能替换。因此不对匹配 MICROSOFT。如需执行大小写不敏感的替换，请使用正则表达式。可搭配正则表达式使用。
vue3学习day01-vue3的优势、新的脚手架工具create-vue、创建vue3项目、vue3的项目文件内容、插件变化
2301_76648183的博客
07-31 472
（4）index.html 单页入口，提供id为app的挂载点。
前端css实现多行文字的展开收起
05-05
实现多行文字的展开收起，可以通过CSS和JavaScript来完成。 首先，利用CSS的text-overflow属性来控制文本的显示方式，当文本超出指定的显示范围时，可以将多余的文本隐藏起来，并用省略号来代替。 其次，使用JavaScript来实现展开和收起的功能，当点击展开按钮时，将被隐藏的文本显示出来；当点击收起按钮时，将多余的文本隐藏起来。 以下是一个示例代码： HTML： ``` <div class="text-container"> <p class="text">这是一段需要展开和收起的文本，可以通过CSS和JavaScript来实现。</p> <button class="btn-expand">展开</button> <button class="btn-collapse">收起</button> </div> ``` CSS： ``` .text-container { position: relative; overflow: hidden; max-height: 100px; /* 设置文本的最大高度 */ } .text { margin: 0; padding: 0; line-height: 1.5; text-overflow: ellipsis; /* 超出文本范围时用省略号代替 */ white-space: nowrap; overflow: hidden; } .btn-expand, .btn-collapse { position: absolute; bottom: 0; right: 0; display: none; } .btn-expand { display: block; } .text-container.expanded .btn-expand { display: none; } .text-container.expanded .btn-collapse { display: block; } ``` JavaScript： ``` var textContainer = document.querySelector('.text-container'); var text = document.querySelector('.text'); var btnExpand = document.querySelector('.btn-expand'); var btnCollapse = document.querySelector('.btn-collapse'); btnExpand.addEventListener('click', function() { textContainer.classList.add('expanded'); }); btnCollapse.addEventListener('click', function() { textContainer.classList.remove('expanded'); }); ``` 以上代码实现了一个简单的多行文字展开收起的效果，可以根据实际需求进行调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值