JavaScript操作表格及CSS样式

人生只合驻贵州 發表於 2020-2-29 23:42:00

<h2>概述</h2>
在前端开发中，表格主要用于存储结构化的数据，CSS主要用于修饰DOM元素，如何通过DOM来操作表格及CSS呢？本文主要通过一些简单的小例子，简述DOM对表格和CSS的常见操作方法，仅供学习分享使用，如有不足之处，还请指正。
<h2>获取表格及数据</h2>
假如当前有一个表格，id为tb01，如下所示：
<div class="cnblogs_code"><img id="code_img_closed_422f8a2a-e9b6-4051-83e4-003c1ff29aaa" class="code_img_closed lazyload" alt="" data-src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img id="code_img_opened_422f8a2a-e9b6-4051-83e4-003c1ff29aaa" class="code_img_opened lazyload" style="display: none" alt="" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_422f8a2a-e9b6-4051-83e4-003c1ff29aaa" class="cnblogs_code_hide">
<pre> 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></pre>
</div>
View Code</div>
获取表格的标题，表头，内容，表尾，行数，某一行的列数等等，如下所示：
<div class="cnblogs_code">
<pre> 1 var table=document.getElementById('tb01');
 2 alert(table.caption.innerText);//获取标题文本
 3 alert(table.tHead);//获取表头，输出
 4 alert(table.tBodies);//获取tbody 输出：
 5 alert(table.tFoot);//获取表尾，输出
 6
 7 alert(table.rows.length);//得到行数 4行
 8
 9 alert(table.tBodies.rows.length);//获取tbody下有多少行，2行
10 alert(table.tBodies.rows.cells.length);//获取对应行有几列，，3列</pre>
</div>
获取单元格里面的内容，如下所示：
<div class="cnblogs_code">
<pre>1 alert(table.tBodies.rows.cells.innerHTML);//获取tody下第二行第二列的内容输出：girl</pre>
</div>
如何删除表格中的标题，表头，表尾，某行，某个单元格，等内容，如下所示：
<div class="cnblogs_code">
<pre>1 table.deleteCaption();//删除标题 
2 table.deleteTHead();//删除表头
3 table.deleteTFoot();//删除表尾
4 table.tBodies.deleteRow(0);//删除tbody第0行
5 table.tBodies.rows.deleteCell(1);//删除tbody第0行的第1列，右侧单元格前移</pre>
</div>
<h2>创建表格及填充数据</h2>
从0创建一个新的表格并显示在页面上，步骤如下：
<ol>
<li>通过createElement('table')创建table元素</li>
<li>通过table.createCaption()创建标题</li>
<li>通过table.createTHead()创建表头</li>
<li>通过table.createTBody()窗体tbody</li>
<li>通过tbody.insertRow(0)插入新行，并返回行对象。</li>
<li>通过insertCell(0)创建单元格</li>
<li>通过document.body.appendChild(table);将table插入到body中</li>
</ol>
<div class="cnblogs_code">
<pre> 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中</pre>
</div>
<h2>CSS样式</h2>
CSS有三种：
<ol>
<li>行内样式，即设置标签的style属性</li>
<li>内联样式，即在<style>标签内容设置</li>
<li>外部样式，即通过<link href >引入</li>
</ol>
<h2>DOM操作style</h2>
有一个DIV样式如下所示：
<div class="cnblogs_code">
<pre>1 <div id="A01" style="color: red;background-color: blanchedalmond;font-size: 30px;float: left;">Hello JavaScript</div></pre>
</div>
<h3>如何获取style设置的样式</h3>
<div class="cnblogs_code">
<pre> 1 var box=document.getElementById('A01');
 2 alert(box.style);//box的行内样式对象。输出：
 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支持，设置样式属性</pre>
</div>
<h3>获取计算后的样式</h3>
<div class="cnblogs_code">
<pre>1 //获取计算后的样式
2 var s = window.getComputedStyle(box,null);//IE11支持，返回
3 alert(s);
4 alert(s.color);//返回：rgb(255,0,0) </pre>
</div>
<h3>获取当前样式</h3>
<div class="cnblogs_code">
<pre>1 var s =box.currentStyle;//IE11支持，返回
2 alert(s);
3 alert(s.color);//返回：red</pre>
</div>
<h2>改变样式</h2>
有一个DIV元素样式如下所示：
<div class="cnblogs_code">
<pre>1 <div id="box" class="one" style="color: orange;">hello js!!!</div></pre>
</div>
当元素的样式是通过ID来设置的，则可以通过更换ID来变更样式，但一般不建议此方式，因为id是唯一的，随意变更会引起错乱。如下所示：
<div class="cnblogs_code">
<pre>1 var box=document.getElementById('box');
2 box.id='pox';//一般不建议此方式，因为id是唯一的。</pre>
</div>
<h2>通过class添加样式</h2>
DOM通过className来获取和变更样式，如下所示：
<div class="cnblogs_code">
<pre> 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 returnclassName.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 }</pre>
</div>
<h2>DOM操作外部样式</h2>
<h3>获取link</h3>
<div class="cnblogs_code">
<pre> 1 //获取link
 2 var link=document.getElementsByTagName('link');//获取第一个link连接的外部css文件对象
 3 var sheet=link.sheet || link.stylesheet;//为了防止浏览器不兼容
 4 alert(sheet);//输出：
 5
 6 //如果既有link又有style获取会比较麻烦
 7 var sheets = document.styleSheets;
 8 alert(sheets);//获取的是styleSheets列表输出
 9 var sheet=sheets;
10 alert( sheet.disabled);//是否被禁用
11 alert(sheet.href);//css样式的路径
12 alert(sheet.title);//获取或设置link的title
13 alert(sheet.media);//IE11，是undefined</pre>
</div>
<h3>CSS样式规则集合</h3>
<div class="cnblogs_code">
<pre>1 alert(sheet.cssRules);//CSS样式规则集合，输出 
2 alert(sheet.cssRules.length);//规则的长度
3 alert(sheet.cssRules.cssText);//第一个规则的css文本 .one{font-size:20px;}
4 alert(sheet.cssRules.selectorText);//第一个规则的选择符输出.one
5 sheet.deleteRule(0);//删除第一条规则
6 sheet.insertRule('body{background-color:orange;}',0);//插入一条规则，第一个参数：规则内容，第二参数：插入位置</pre>
</div>
以下方法和上述一致，可以兼容两种，来兼容不同的浏览器，如下所示：
<div class="cnblogs_code">
<pre>1 alert( sheet.rules);//输出
2 alert(sheet.rules.selectorText);////第一个规则的选择符输出.one
3 alert(sheet.rules.cssText);//第一个规则的css文本 .one{font-size:20px;}
4 sheet.addRule('body','background-color:orange;',0);//添加规则
5 sheet.removeRule(0);//删除规则
6 alert( sheet.rules.style.color);//行内，内联，样式都可以获取到
7 alert(sheet.cssRules.style.color);</pre>
</div>
<h2>备注</h2>
次北固山下 [ 唐 ] 王湾
客路青山外，行舟绿水前。潮平两岸阔，风正一帆悬。
海日生残夜，江春入旧年。乡书何处达？归雁洛阳边。

</div>
<div id="MySignature" role="contentinfo">
<div id="AllanboltSignature">

<p style="border-top: #e0e0e0 1px dashed; border-right: #e0e0e0 1px dashed; border-bottom: #e0e0e0 1px dashed; border-left: #e0e0e0 1px dashed; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 30px; font-family: 微软雅黑; font-size: 12px" id="PSignature">
 

<img alt="" src="https://images.cnblogs.com/cnblogs_com/hsiang/1154298/o_115f1cd8.jpg" width="80px" height="80px">

作者：老码识途
 
出处：http://www.cnblogs.com/hsiang/
 
本文版权归作者和博客园共有，写文不易，支持原创，欢迎转载【点赞】，转载请保留此段声明，且在文章页面明显位置给出原文连接，谢谢。
 关注个人公众号，定时同步更新技术及职场文章
 

</div> 
来源：https://www.cnblogs.com/hsiang/p/12387361.html

頁: [1]

琼殿技术论坛's Archiver

JavaScript操作表格及CSS样式