JavaScript 控制table具体某列不显示

最新推荐文章于 2019-01-04 09:06:47 发布

damaolly

最新推荐文章于 2019-01-04 09:06:47 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript js

本文链接：https://blog.youkuaiyun.com/damaolly/article/details/44261181

JavaScript 专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何在JavaScript中实现对table特定列的显示与隐藏控制，特别提醒，在动态数据场景下，应在数据赋值后再进行td的显示设置，以避免出现头部控制正确但其他行未生效的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、table代码

				<table id="mytable" border="0" width="1400" align="center"
						cellpadding="3" cellspacing="1" bgcolor="#dfdfdf">
						<tbody id="tbody1" style="background: #e4e9f0; font-weight: bold;">
							<tr class="gray12">
								<td width="120" bgcolor="#FFFFFF">日期</td>
								<td width="120" bgcolor="#FFFFFF">媒体名称</td>
								<td width="200" bgcolor="#FFFFFF">投放形式</td>
								<td width="120" bgcolor="#FFFFFF">曝光次数</td>
								<td width="120" bgcolor="#FFFFFF">曝光人数</td>
								<td width="120" bgcolor="#FFFFFF">点击次数</td>
								<td width="120" bgcolor="#FFFFFF">点击人数</td>
								<td width="120" bgcolor="#FFFFFF">CTR</td>
								<td width="120" bgcolor="#FFFFFF">访次</td>
								<td width="120" bgcolor="#FFFFFF">跳出次数</td>
								<td width="120" bgcolor="#FFFFFF">访问深度</td>
								<td width="120" bgcolor="#FFFFFF">浏览时长/秒</td>
								<td width="120" bgcolor="#FFFFFF">参与活动人数</td>
								<td width="120" bgcolor="#FFFFFF">办理业务人数</td>
							</tr>
						</tbody>
						<tbody id="detail_id"></tbody>
					</table>

2、js根据权限控制

注：如果数据是动态数据，当赋值完后再控制显示td，否则会造成td头控制成功，其他行失败的情况

		if (uname === "guest") {
				$("#mytable tr").each(function() {
					$(this).find("td").eq(7).css("display", "none");
					$(this).find("td").eq(8).css("display", "none");
					$(this).find("td").eq(9).css("display", "none");
					$(this).find("td").eq(10).css("display", "none");
					$(this).find("td").eq(11).css("display", "none");
					$(this).find("td").eq(12).css("display", "none");
					$(this).find("td").eq(13).css("display", "none");
				});
			}