js设置table显示隐藏

在JavaScript中，控制HTML表格（<table>）的显示和隐藏可以通过多种方式实现。以下是一些基本的方法和概念：

基础概念

DOM操作：JavaScript可以修改HTML文档对象模型（DOM），从而改变页面的显示状态。
CSS样式：通过修改元素的CSS样式属性，如display，可以控制元素的显示和隐藏。

类型与应用场景

基于ID的控制：适用于单个表格的控制。
基于类的控制：适用于多个表格的控制。
事件驱动：如点击按钮时显示或隐藏表格。

示例代码

以下是一些示例代码，展示了如何通过JavaScript控制表格的显示和隐藏：

通过ID控制单个表格

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table Show/Hide Example</title>
<style>
  #myTable {
    display: none; /* 默认隐藏 */
  }
</style>
</head>
<body>

<button onclick="toggleTable()">Toggle Table</button>
<table id="myTable">
  <tr><th>Header 1</th><th>Header 2</th></tr>
  <tr><td>Data 1</td><td>Data 2</td></tr>
</table>

<script>
function toggleTable() {
  var table = document.getElementById('myTable');
  if (table.style.display === 'none') {
    table.style.display = 'table'; // 显示表格
  } else {
    table.style.display = 'none'; // 隐藏表格
  }
}
</script>

</body>
</html>

通过类控制多个表格

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tables Show/Hide Example</title>
<style>
  .hide-table {
    display: none; /* 默认隐藏 */
  }
</style>
</head>
<body>

<button onclick="toggleTables()">Toggle Tables</button>
<table class="hide-table">
  <tr><th>Header 1</th><th>Header 2</th></tr>
  <tr><td>Data 1</td><td>Data 2</td></tr>
</table>
<table class="hide-table">
  <tr><th>Header A</th><th>Header B</th></tr>
  <tr><td>Data A</td><td>Data B</td></tr>
</table>

<script>
function toggleTables() {
  var tables = document.getElementsByClassName('hide-table');
  for (var i = 0; i < tables.length; i++) {
    if (tables[i].style.display === 'none') {
      tables[i].style.display = 'table'; // 显示表格
    } else {
      tables[i].style.display = 'none'; // 隐藏表格
    }
  }
}
</script>

</body>
</html>

可能遇到的问题及解决方法

问题：修改display属性后，表格样式错乱。原因：可能是由于CSS样式冲突或JavaScript代码执行时机不当。 解决方法：

确保CSS样式正确无误。
使用setTimeout或确保DOM完全加载后再执行JavaScript代码。

window.onload = function() {
  // 确保DOM加载完毕后再绑定事件和修改样式
};

通过上述方法和代码示例，你可以有效地控制HTML表格的显示和隐藏，并解决可能出现的问题。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

JS 控制隐藏显示

比较简单的实现.style.display就是控制层隐藏或显示的属性....style="display: none" onMouseout="hidden();"> show it div的visibility可以控制div的显示和隐藏...，但是隐藏后页面显示空白 style="visibility: none;" document.getElementById("typediv1").style.visibility="hidden";...//隐藏 document.getElementById("typediv1").style.visibility="visible";//显示通过设置display属性可以使div隐藏后释放占用的页面空间...("typediv1").style.display="";//显示如果用div.style.display="none"隐藏会引起，div里面的东西休眠，里面的事件就不响应了

20.7K3 0

解决bootstrap-table-fixed-columns.js显示列与隐藏列按钮切换表格不对齐

table class="table-striped table-hasthead nowrap" id="tableTest1" data-search="true" data-show-columns...="true" data-fixed-columns="true" data-fixed-number="3"> table> 含有data-show-columns="true"属性时会在右边显示可以切换列的按钮...结合bootstrap-table-fixed-columns.js插件使用时会出现列不对齐的问题查看Dom结构发现点击一次具体列切换按钮时会增加一个class 为fixed-table-header-columns...的html片段，我们只需保留最后一个，解决方法 1、先删除多余的html 2、执行表格对齐函数为了使排序的图标正常显示，需要在onSort的事件中执行能使图标正常显示的代码（注意如果要使固定的列有排序的功能请看我另一篇博客...#tableTest1').bootstrapTable('resetView'); fixleftwidth() }); }); //格式化显示

5.7K4 0

vue 路由meta 设置导航隐藏与显示

vue 路由meta 设置title 导航隐藏 router.js routes: [{ path: '/', name: 'HelloWorld',...meta: { title: "HelloWorld", 要现实的title show: true 设置导航隐藏显示...$route.meta.show 显示或隐藏 main.js router.beforeEach((to, from, next) => {

2K2 0

如何设置Element表格显示或者隐藏列

Element 表格点击复选框显示或隐藏列，效果如下：主要步骤：一、渲染复选框 table"> table-column...> table-column v-for="(item,index) in formHead" :key="index" :label...> table> 三、监听复选框选择内容的变化，过滤表格的thead信息 watch: { checkboxVal(valArr) { console.log(...item => valArr.indexOf(item.prop) >= 0 ); this.key = this.key + 1; } }, 注意：要设置

6.1K1 0

【php】设置php显示隐藏错误信息

找到display_errors = On 修改为 display_errors = off

2.6K2 0

SAP 物料主数据屏幕字段显示OR隐藏设置

4.输入步骤2找到对应的字段选择组代码16，在对应的事务代码MM01/MM02/MM03设置是否隐藏显示 ?...如上图：隐藏代表不显示，显示代表仅显示，需求条目代表必输，可选条码代表不必输 5.如上步骤操作以后，对应MM02里面设置了可选条码，则MM02进去后就可以看到配额安排此字段，并进行数据的维护了 ?...通过类似的方法，举一反三，可对物料主数据其它相应的字段进行相应的设置，满足不同的业务需求。欢迎大家有问题一起交流，共同成长！更多资讯，欢迎扫码了解关注！

4.5K1 2

今日作业 -- 用js控制DIV的显示隐藏

这个题很简单的，就是用一个按钮切换二个菜单的显示和隐藏。比昨晚的查找重复字符串要简单的多。...参与写作业的同学们基本都写的不错，思路也都OK，用原生JS，jQuery，ES6都可以，，暴露出来的问题主要有二个，一是DOM查找的效率问题，这个大家自己其实都懂，我就提一下不多说了哈，，二是判断条件的选择

17.1K6 0

设置窗体透明隐藏任务栏与全屏显示

因为一种特别的需要做了一个小程序主要三个功能设置窗体透明 void CSetDlg::SetTransparent() { ::SetWindowPos...hModule); } SetColor(this->GetSafeHwnd(),0,50,2); FreeLibrary(hModule); } 全屏幕显示窗体...1, rect.top-1, rect.right-rect.left + 3, rect.bottom-rect.top + 3, SWP_FRAMECHANGED); } 隐藏任务栏

1.4K2 0

css设置table样式_table的样式怎么设置

漂亮的table表格样式css源码漂亮的table表格样式 css源码 table { border-collapse...: collapse; margin: 0 auto; text-align: center; } table td, table th { border: 1px solid #cad9ea; color...: #666; height: 30px; } table thead th { background-color: #CCE8EB; width: 100px; } table tr:nth-child...(odd) { background: #fff; } table tr:nth-child(even) { background: #F5FAFA; } ...table width="90%" class="table"> 车间能源消耗比例车间

4.6K2 0

显示隐藏切换同时变化文字jquery与js实现

$("#dazhanDetail").html("- 收缩") : $("#dazhanDetail").html("展开");}); $(".fixed-table-container...").css("padding-bottom","40px"); }) }) 第二种方法js 实现 var oBtn = document.getElementById...oDiv1.style.display = 'none'; oDiv2.style.display = 'block'; //这个地方显示... oDiv2.style.display = 'none'; oDiv1.style.display = 'block'; //这个地方显示

7.6K3 0

html5设置table样式_原生js添加样式

table样式设置表格： ._table{width: 100%; border-collapse: collapse; border:0px;} 设置表头： ...., 250, 0.92); font-weight:bold;} 设置列： ....solid #ffffff;} 设置行背景（斑马纹效果） ...._table tbody tr {background: #fff; font-size: 13px; color: #393939;} ...._table tbody tr:nth-child(2n){ background: #f3f3f3;} 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。

14.6K2 0

table边框设置

table边框设置一、表格的常用属性基本属性有：width（宽度）、height（高度）、border（边框值）、cellspacing（表格的内宽，即表格与tr之间的间隔）、 cellpadding...边框单线的实现方法现在给出效果图： 1、实现方法一：实现原理：利用table的单元格之间的间距(cellspacing)和table的背景色来实现 2、实现方法二：实现原理：利用table的border...起作用的是rules这个参数，它有三个值(cols,rows,none)，当rules=cols时，表格会隐藏横向的分隔线，也就是我们只能看到表格的列；当rules=rows时，就隐藏了纵向的分隔线，...c c c 这是隐藏了纵向分隔线的表格，即rules=rows a b c a b c a b c 这是隐藏了所有内部分隔线的表格，即rules=none 三、表格外部分隔线的属性表格外边框的显示与隐藏...注意：只对表格的外边框起作用，对内部边、线不起作用只显示上边框只显示下边框只显示左、右边框只显示上、下边框只显示左边框只显示右边框不显示任何边框看一下对比效果吧

3K5 0

HTML5-JS操作页面滚动条（禁止、隐藏、显示、不显示）

不显示滚动条（css） ::-webkit-scrollbar { width: 0px; } 禁止页面滚动条（js） document.body.parentNode.style.overflowY...= "hidden"; $("body").parent().css("overflow-y","hidden"); 启用浏览器滚动条（js） document.body.parentNode.style.overflowY

10.9K3 0

Bootstrap Table默认隐藏列原

经常由于表格字段比较长，需要默认隐藏不是特别重要的列，只需要2步即可完成 1、首先在thead里设置data-field 属性 <th data-sortable=... 2、调用hideColumn方法 $('#tableTest3').bootstrapTable('hideColumn',"dataTypeId"); //tableTest3为table

3.2K2 0

element 表格内容过长时设置隐藏，通过popover弹窗显示

二、示例代码： table-column prop="safetyRisk" label="安全隐患" width="200"> <template slot-scope="scope"...scope.row.safetyRisk.substr(0, 30) + "..." }} table-column

2.3K2 0

html中table样式_table样式设置

如果想在网页中建一个如下table表格应该怎么做呢？...首先建一个表table> table>/*table标签就是建一个表格*/ /*tr标签就是table row，即为表格中的一行*/ 学号/*th标签即table...head，就是表头*/ 姓名手机号家庭地址 001/*td为table...我们对上述标签添加样式： table{/*为页面中所有的table标签添加样式*/ width: 900px;/*设置table宽度*/ margin: auto...;/*让表格居中显示*/ border: black 1px solid;/*添加边框*/ border-spacing: 0px;去掉table/*标签及其子标签边框之间的白色空隙*

5.5K2 0

原生js与jQuery显示隐藏div的几种方法

原生Js与jQuery显示隐藏div的几种方法简介：本文将会讲解，如何使用原生的JS和jquery来实现对于这个div盒子的隐藏 js 方式一首先是进行js演示和讲解。...document.getElementById("d").style.display = ""; // 显示盒子的方法方式二 visibility属性可以控制div的显示和隐藏，但是隐藏后页面显示空白...通过attr设置属性 $(“#id”).attr(“style”,“display:none;”);//隐藏div $(“#id”).attr(“style”,“display:block;”);//显示...div 通过css方法设置 $(“#id”).css(“display”,“none”);//隐藏div $(“#id”).css(“display”,“block”);//显示div 通过hide与show...方法 $(“#id”).hide();//隐藏div 表示display:none $(“#id”).show();//显示div 表示display:block 动态显示 $("#id").toggle

1020 0

Android 隐藏显示键盘

https://blog.csdn.net/lyhhj/article/details/49105161 Android中隐藏显示键盘操作：隐藏键盘： /** * 隐藏软键盘...= null) { // 隐藏虚拟键盘 InputMethodManager inputmanger = (InputMethodManager) act...inputmanger.hideSoftInputFromWindow(view.getWindowToken(), 0); } } 切换键盘： /** * 切换软件盘显示隐藏...*/ public static void switchSoftInputMethod(Activity act) { // 方法一(如果输入法在窗口上已经显示，则隐藏...，反之则显示) InputMethodManager iMM = (InputMethodManager) act .getSystemService(Context.INPUT_METHOD_SERVICE

1.9K1 0

隐藏菜单显示

/script.js"> @import url("https://fonts.googleapis.com/css2?

3K1 0

（vue+element-ui）动态设置tabel列的显示与隐藏

不得不说，百度很强大，只要搜索饿了么怎么动态设置列会得到很多答案； 1、v-show(不生效)：v-show直接绑定,得到的结果很意外，哈哈，不起作用，饿了么对v-show不感冒； 2、v-if()：此方法确实可以控制显示与隐藏...；不过分情况使用： >>a: element组件 el-table-column table-column v-if="colData[0].istrue" prop="CustName..." min-width="85" label="客户姓名" :show-overflow-tooltip='true' align="center"> table-column...(可以点击tabel表格的某一展示值，做一些事情，如：弹窗，跳转等) table-column key="1" v-if="colData[0].istrue" prop="CustName...那么你点击动态展示列的时候布局会乱，或者导致报错； 2.加了key之后ok解决；备注：加 key 是百度来的，有篇文章加的是：key=Math.random(); 这样是有bug存在，设置动态列的时候

10.5K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

js设置table显示隐藏

基础概念

相关优势

类型与应用场景

示例代码

通过ID控制单个表格

通过类控制多个表格

可能遇到的问题及解决方法

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐