javascript如何隐藏行

发布时间:2022-01-18 17:09:46 作者:iii
来源:亿速云 阅读:211

这篇文章主要介绍了javascript如何隐藏行的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇javascript如何隐藏行文章都会有所收获,下面我们一起来看看吧。

javascript隐藏行的方法:1、创建一个HTML示例文件;2、定义一个table表格;3、通过js代码“function setDetailMsgRow(rowID, btn) {...}”实现隐藏table的某一行即可。

javascript如何隐藏行

本文操作环境:Windows7系统、javascript1.8.5版、Dell G3电脑。

javascript怎么隐藏行?

js控制隐藏或显示table的某一行

主要JS如下:(兼容browser: IE9, FireFox, Chrome, 360 safe)

            var row = document.getElementById(rowID);
            if (row != null) {
                if (row.style.display == (document.all ? "block" : "table-row")) {
                    row.style.display = "none";
                }
                else {
                    row.style.display = (document.all ? "block" : "table-row");
                }
            }

效果图如下:

javascript如何隐藏行

全部 HTML:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="testWeb.WebForm1" %>
 
<!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 runat="server">
    <title></title>
 
    <script language="javascript" type="text/javascript">
        function setDetailMsgRow(rowID, btn) {
            var row = document.getElementById(rowID);
            if (row != null) {
                if (row.style.display == (document.all ? "block" : "table-row")) {
                    row.style.display = "none";
                }
                else {
                    row.style.display = (document.all ? "block" : "table-row");
                }
            }
 
            if (btn != null) {
                if (btn.value != "Hide Message")
                    btn.value = "Hide Message";
                else
                    btn.value = "Show Message";
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <input type="button" οnclick="setDetailMsgRow('tmpRow0',this)" value="Show Message"/>
        <table border="1"><tr id="tmpRow0" style="display:none;color:Blue"><td>aa</td><td>44aa</td></tr>
            <tr id="tmpRow1"><td>bb</td><td>44bb</td></tr>
            <tr id="tmpRow2"><td>cc</td><td>44cc</td></tr>
            <tr id="tmpRow3"><td>dd</td><td>44dd</td></tr>
            <tr id="tmpRow4"><td>ee</td><td>44ee</td></tr>
        </table>
    </div>
    </form>
</body>
</html>

关于“javascript如何隐藏行”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“javascript如何隐藏行”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。

推荐阅读:
  1. Exce中l动态隐藏行效果怎样实现
  2. layui隐藏表格行的方法

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

javascript

上一篇:javascript的range使用方法有哪些

下一篇:javascript继承的作用是什么

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》