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

2024-07-29 18:10:51

本文实例讲述了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程序设计有所帮助。

javascript DOM操作之动态删除TABLE多行

DOM动态删除TABLE多行 function $(objId){ return document.getElementById(objId); } function del_tbl(tblN,ckN){ var ck = document.getElementsByName(ckN); var tab = $(tblN); var rowIndex; for(var i=0;i 2 3 第一行 1 第二行 2 第三行 3 第四行 4 第五行 5 [Ctrl+A 全选注:如需引入外部Js需刷新
javascript hashtable实现代码

复制代码代码如下: var arr = new Array(); arr['item1'] = 'the value of item 1 '; arr['item2'] = 'the value of item 2 '; alert(arr['item1']); alert(arr['item2']); 但上述功能,不符我们的实际要求,另外查询遍历也不方便,我们需要在Array的基础上进行扩展, 下面我们可以用js中的数组来实现类似的hashtable的功能, 复制代码代码如下: funct
JavaScript实现将xml转换成html table表格的方法

本文实例讲述了JavaScript实现将xml转换成html table表格的方法.分享给大家供大家参考.具体如下: function ConvertToTable(targetNode) { // if the targetNode is xmlNode this line must be removed // i couldnt find a way to parse xml string to xml node // so i parse xml string to xml documen
javascript+css 新闻显示tab 选项卡效果

我们_新闻显示选项卡效果(javascript+css) 新闻排行国内国际社会网评新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河最高法:承诺不判赖昌星死刑没有超越法律程序物权法:满70年住宅建设用地使用权将自动续期弟弟被妻下药毒死男子买女尸为其配阴婚(图) 揭开郑州神枪手神秘面纱头号狙击手是近视眼美军高官:不排除和中国发生直接军事对抗可能浙江东阳传奇富姐吴英涉嫌非法吸收存款被批捕西方炒作"中国航母威胁论"称05年已正式服役女孩生活无法自理请人大代表递交安乐死议案建
javascript实现tabs选项卡切换效果(自写原生js)

现在的页面上有许多各种各样的页面效果,常用的有弹出层效果,无缝滚动效果,选项卡切换效果.今天分享一款自己用原生javascript写的选项卡切换效果,由于本人水平有限,如有问题请指出. 效果图如下: html代码: 复制代码代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>js-tabs</
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)

insertRow() 方法定义和用法 insertRow() 方法用于在表格中的指定位置插入一个新行. 语法 tableObject.insertRow(index) 返回值返回一个 TableRow,表示新插入的行. 说明该方法创建一个新的 TableRow 对象,表示一个新的 <tr> 标记,并把它插入表中的指定位置. 新行将被插入 index 所在行之前.若 index 等于表中的行数,则新行将被附加到表的末尾. 如果表是空的,则新行将被插入到一个新的 <tbody>
javascript实现tab切换特效

本文为大家分享了javascript实现tab切换特效的方法,具体的实现内容如下,先看一下效果图: 很简单的javascript实现tab切换特效 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Tab</title> <script src="js/jquery-1.11.1.js&qu
js(JavaScript)实现TAB标签切换效果的简单实例

一个可以js(JavaScript)的tab标签切换代码,可以自动适应宽度,可以自己添加删除标签块,傻瓜式操作便能完成! 复制代码代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401- 19991224/loose.dtd"><HTML xmlns="http://www.w
javascript清空table表格的方法

本文实例讲述了javascript清空table表格的方法.分享给大家供大家参考.具体如下: 1. 通常方法循环table的rows,然后一个一个删除. 这个方法是通常的方法,可行,但是效率不好. 2. 另一个方法 var artTable = document.getElementById("artical_table"); console.debug(artTable.getElementsByTagName("thead")[0]); var artBody
javascript 哈希表(hashtable)的简单实现

首先简单的介绍关于属性的一些方法: 属性的枚举: for/in循环是遍历对象属性的方法.如复制代码代码如下: var obj = { name : 'obj1', age : 20, height : '176cm' } var str = ''; for(var name in obj) { str += name + ':' + obj[name] + '\n'; } alert(str); 输出为:name:obj1 age:20 height:176cm 检查属性是否存在: in运算
javascript 移动鼠标得到单元格所在table表中的rowIndex位置[兼容ie,firefox] 原创

从cnblogs看到的代码,作者的代码随便不兼容firefox但,有助于大家学习为什么下面的代码兼容了firefox,大家可以对比下,有助于学习,对于更多的文章可以参考我们以前发布的文章. function mouseover(){ var ObjTd=window.event.srcElement; var ObjTr=ObjTd.parentElement; var y=ObjTr.rowIndex; var x=ObjTd.cellIndex; alert(x+" "+y); }
javascript 表格排序和表头浮动效果(扩展SortTable)

一.SortTable说明 SortTable version 2 7th April 2007 Stuart Langridge, http://www.kryogenix.org/code/browser/sorttable/ Instructions: Download this file Add <script src="sorttable.js"></script> to your HTML Add class="sortable"
javascript实现tab切换的四种方法

tab切换在网页中很常见,故最近总结了4种实现方法. 首先,写出tab的框架,加上最简单的样式,代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> *{ padding: 0; margin: 0; } li{ list-style:
javascript 通用滑动门tab类

滑动门通用JS /* 十三妖 qq:181907667 msn:wl181907667@hotmail.com 邮箱:thirdteendevil@163.com */ function scrollDoor(){ } scrollDoor.prototype = { sd : function(menus,divs,openClass,closeClass){ var _this = this; if(menus.length != divs.length) { alert("菜单层数量和内容
一实用的实现table排序的Javascript类库

一个Javascript 的类库,用于table内容排序.使用很方便,不用每次都去调用数据库了. 特别适合多表查询的排序.加上<tbody>的style.display 切换,也可以实现分页. 效果演示用法: 1.添加JS <SCRIPT src="sorttable.js" type="text/javascript"></SCRIPT> 2.添加TABLE,注意的是:一定要有ID,class为"sortable&q
javascript仿126邮箱TAB切换效果

简洁Tab 新闻1 新闻2 新闻3 新闻4 新闻列表1 新闻列表2 新闻列表3 新闻列表4 新闻1 新闻2 新闻3 新闻4 新闻列表1 新闻列表2 新闻列表3 新闻列表4 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
javascript实现tab切换的两个实例

上一篇<javascript实现tab切换的四种方法>中讲了tab切换的4种不同实现原理,那么,现在到理论联系实际的时候了,下面就写几个实例. 一.仿"中国人民大学"官网的tab切换,背景是图片,效果图如下: 鼠标移到新闻时的效果鼠标移到公告时的效果鼠标移到交流时的效果学术.交流和文体的内容为空,我没有写.完整代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv=

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

相关推荐

随机推荐