JavaScript控制table某列不显示的方法

前端技术 2023/09/02 JavaScript

本文实例讲述了JavaScript控制table某列不显示的方法。分享给大家供大家参考。具体实现方法如下：

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\");
 });
}

希望本文所述对大家的javascript程序设计有所帮助。

本文地址：https://www.stayed.cn/item/4963

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案