javascript隐藏行的方法:1、创建一个html示例文件;2、定义一个table表格;3、通过js代码“function setdetailmsgrow(rowid, btn) {...}”实现隐藏table的某一行即可。
本文操作环境: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"); } }
效果图如下:
全部 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>
推荐学习:《js基础教程》
以上就是javascript怎么隐藏行的详细内容。