JavaScript操作表格及CSS样式

Posted 天马行空

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript操作表格及CSS样式相关的知识,希望对你有一定的参考价值。

概述

在前端开发中,表格主要用于存储结构化的数据,CSS主要用于修饰DOM元素,如何通过DOM来操作表格及CSS呢?本文主要通过一些简单的小例子,简述DOM对表格和CSS的常见操作方法,仅供学习分享使用,如有不足之处,还请指正。

获取表格及数据

假如当前有一个表格,id为tb01,如下所示:

技术图片
 1 <table id="tb01" width="300" border="1" cellspacing="2" cellpadding="2">
 2     <caption>人员表</caption>
 3     <thead>
 4         <tr>
 5             <td>姓名</td>
 6             <td>性别</td>
 7             <td>年龄</td>
 8         </tr>
 9     </thead>
10     <tbody>
11         <tr>
12             <td>Tom</td>
13             <td>boy</td>
14             <td>20</td>
15         </tr>
16         <tr>
17             <td>Jack</td>
18             <td>girl</td>
19             <td>19</td>
20         </tr>
21     </tbody>
22     <tfoot>
23         <tr>
24             <td colspan="3">合计:2</td>
25         </tr>
26     </tfoot>
27 </table>
View Code

获取表格的标题[caption],表头[thead],内容[tbody],表尾[tfoot],行数[rows],某一行的列数[cells]等等,如下所示:

 1 var table=document.getElementById(‘tb01‘);
 2 alert(table.caption.innerText);//获取标题文本
 3 alert(table.tHead);//获取表头,输出[object htmlTableSectionElement]
 4 alert(table.tBodies);//获取tbody 输出:[object HTMLCollection]
 5 alert(table.tFoot);//获取表尾,输出[object HTMLTableSectionElement]
 6 
 7 alert(table.rows.length);//得到行数 4行
 8             
 9 alert(table.tBodies[0].rows.length);//获取tbody下有多少行 ,2行
10 alert(table.tBodies[0].rows[0].cells.length);//获取对应行有几列,,3列

获取单元格里面的内容,如下所示:

1 alert(table.tBodies[0].rows[1].cells[1].innerHTML);//获取tody下第二行第二列的内容 输出:girl

如何删除表格中的标题[caption],表头[thead],表尾[tfoot],某行[row],某个单元格[cell],等内容,如下所示:

1 table.deleteCaption();//删除标题            
2 table.deleteTHead();//删除表头
3 table.deleteTFoot();//删除表尾
4 table.tBodies[0].deleteRow(0);//删除tbody第0行
5 table.tBodies[0].rows[0].deleteCell(1);//删除tbody第0行的第1列,右侧单元格前移

创建表格及填充数据

从0创建一个新的表格并显示在页面上,步骤如下:

  1. 通过createElement(‘table‘)创建table元素
  2. 通过table.createCaption()创建标题
  3. 通过table.createTHead()创建表头
  4. 通过table.createTBody()窗体tbody
  5. 通过tbody.insertRow(0)插入新行,并返回行对象。
  6. 通过insertCell(0)创建单元格
  7. 通过document.body.appendChild(table);将table插入到body中
 1 var table=document.createElement(‘table‘);
 2 table.border=1;
 3 table.width=300;
 4 table.createCaption().innerHTML=‘人员表2‘;
 5 var thead = table.createTHead();
 6 var tr = thead.insertRow();
 7 tr.insertCell(0).innerHTML=‘Name‘;
 8 tr.insertCell(1).innerHTML=‘Sexy‘;
 9 tr.insertCell(2).innerHTML=‘Age‘;
10 var tbody=table.createTBody();
11 var tr0 =tbody.insertRow(0);
12 tr0.insertCell(0).innerHTML=‘Lily‘;
13 tr0.insertCell(1).innerHTML=‘girl‘;
14 tr0.insertCell(2).innerHTML=‘12‘;
15 var tr1 =tbody.insertRow(1);
16 tr1.insertCell(0).innerHTML=‘Lucy‘;
17 tr1.insertCell(1).innerHTML=‘girl‘;
18 tr1.insertCell(2).innerHTML=‘13‘;
19 var tfoot=table.createTFoot();
20 var tr3 = tfoot.insertRow();
21 var tc3= tr3.insertCell(0);
22 tc3.innerHTML=‘合计:2‘;
23 tc3.colSpan=3;
24 document.body.appendChild(table);//将table插入到body中

CSS样式

CSS有三种:

  1. 行内样式,即设置标签的style属性
  2. 内联样式,即在<style>标签内容设置
  3. 外部样式,即通过<link href >引入

DOM操作style

有一个DIV样式如下所示:

1 <div id="A01" style="color: red;background-color: blanchedalmond;font-size: 30px;float: left;">Hello javascript</div>

如何获取style设置的样式

 1 var box=document.getElementById(‘A01‘);
 2 alert(box.style);//box的行内样式对象。输出:[object MSStyleCSSProperties]
 3 alert( box.style.color);//获取设置的颜色
 4 alert(box.style.backgroundColor);//获取设置的背景颜色,如果设置属性中有-连接符,则用大写表示
 5 alert(box.style.fontSize);//获取设置的字号 30px
 6 box.style.float;//关键字,会报错
 7 alert(box.style.styleFloat);//IE11支持,获取浮动 left
 8 alert(box.style.cssFloat);//IE11支持,获取浮动 left
 9 alert(box.style.cssText);//获取style的文本内容
10 box.style.setProperty(‘color‘,‘yellow‘);//IE11支持,设置样式属性

获取计算后的样式

1 //获取计算后的样式
2 var s = window.getComputedStyle(box,null);//IE11支持,返回[object CSSStyleDeclaration]
3 alert(s);
4 alert(s.color);//返回:rgb(255,0,0) 

获取当前样式

1 var s =box.currentStyle;//IE11支持,返回[object MSCurrentStyleProperties]
2 alert(s);
3 alert(s.color);//返回:red

改变样式

有一个DIV元素样式如下所示:

1 <div id="box" class="one" style="color: orange;">hello js!!!</div>

当元素的样式是通过ID来设置的,则可以通过更换ID来变更样式,但一般不建议此方式,因为id是唯一的,随意变更会引起错乱。如下所示:

1 var box=document.getElementById(‘box‘);
2 box.id=‘pox‘;//一般不建议此方式,因为id是唯一的。

通过class添加样式

DOM通过className来获取和变更样式,如下所示:

 1 //通过class添加样式
 2 var box=document.getElementById(‘box‘);
 3 box.className=‘two‘;//会把之前的样式清除掉,再重新添加样式,这样会覆盖之前的css样式
 4 box.className=‘one two‘;//可以一次写多个样式
 5 function hasClass(element ,cname){
 6     var className=element.className;
 7     //return !!!className.match(new RegExp(cname));
 8     return  className.indexOf(cname,0)>-1;
 9 }
10 alert( hasClass(box,‘one‘));//返回是否包含样式
11             
12 //增加样式
13 function addClass(box,cname){
14     box.className+=‘ ‘+cname;
15 }
16             
17 //删除样式
18 function removeClass(box,cname){
19     box.className = box.className.replace(cname,‘ ‘);
20 }

DOM操作外部样式

获取link

 1 //获取link
 2 var link=document.getElementsByTagName(‘link‘)[0];//获取第一个link连接的外部css文件对象
 3 var sheet=link.sheet || link.stylesheet;//为了防止浏览器不兼容
 4 alert(sheet);//输出:[object CSSStyleSheet]
 5         
 6 //如果既有link又有style获取会比较麻烦
 7 var sheets = document.styleSheets;
 8 alert(sheets);//获取的是styleSheets列表 输出[object StyleSheetList]
 9 var sheet=sheets[0];
10 alert( sheet.disabled);//是否被禁用
11 alert(sheet.href);//css样式的路径
12 alert(sheet.title);//获取或设置link的title
13 alert(sheet.media[0]);//IE11,是undefined

CSS样式规则集合

1 alert(sheet.cssRules);//CSS样式规则集合,输出 [object CSSRuleList]
2 alert(sheet.cssRules.length);//规则的长度
3 alert(sheet.cssRules[0].cssText);//第一个规则的css文本 .one{font-size:20px;}
4 alert(sheet.cssRules[0].selectorText);//第一个规则的选择符 输出.one
5 sheet.deleteRule(0);//删除第一条规则
6 sheet.insertRule(‘body{background-color:orange;}‘,0);//插入一条规则,第一个参数:规则内容,第二参数:插入位置

以下方法和上述一致,可以兼容两种,来兼容不同的浏览器,如下所示:

1 alert( sheet.rules);//输出[object MSCSSRuleList]
2 alert(sheet.rules[0].selectorText);////第一个规则的选择符 输出.one
3 alert(sheet.rules[0].cssText);//第一个规则的css文本 .one{font-size:20px;}
4 sheet.addRule(‘body‘,‘background-color:orange;‘,0);//添加规则
5 sheet.removeRule(0);//删除规则
6 alert( sheet.rules[0].style.color);//行内,内联,样式都可以获取到
7 alert(sheet.cssRules[0].style.color);

备注

次北固山下
[ 唐 ] 王湾

客路青山外,行舟绿水前。潮平两岸阔,风正一帆悬。

海日生残夜,江春入旧年。乡书何处达?归雁洛阳边。

以上是关于JavaScript操作表格及CSS样式的主要内容,如果未能解决你的问题,请参考以下文章

怎么用CSS设置html中的表格边框样式

DOM操作表格及样式4

仅使用 css 更改多个元素的样式

利用javascript实现css操作

如何在html的表格中加入边框线

使用 Javascript 切换 CSS 表格(点击时)