DOM操作表格和样式

来源：互联网发布：软件搜索神器编辑：程序博客网时间：2024/05/21 17:59

DOM操作表格

1.html创建表格

<!--首先定义一个表格 （需要注意的是一个表格的表头和表尾是唯一的，但是表的主体可以有多个，caption用来定义表格的标题）--><!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <script type="text/javascript" src="demo1.js"></script></head><body>    <table width="300" border="1">       <caption>人员表</caption> <!-- 表格的标题 只能有一个 -->        <thead>   <!-- 表格的头部 只有一个 -->            <tr>                <th>姓名</th>                <th>性别</th>                <th>年龄</th>            </tr>        </thead>        <tbody> <!-- 表的主体，可以有多个 -->             <tr>                <td>张三</td>                <td>男</td>                <td>23</td>             </tr>             <tr>                <td>李四</td>                <td>女</td>                <td>34</td>             </tr>        </tbody>        <tfoot><!-- 表头的尾部 ，只有一个 -->            <tr>                <td colspan="3">合计：2人</td>            </tr>        </tfoot>    </table></body></html>

2.使用DOM创建表格

var table = document.createElement('table');document.body.appendChild(table);  <!--把表格追加到body-->table.width="300";table.border="1";  //或者table.setAttribute('border','1'); var caption = document.createElement('caption'); table.appendChild(caption);   var captionText = document.createTextNode('人员表');   //caption.innerHTML='人员表'; caption.appendChild(captionText);var thead = docuemnt.createElement('thead');table.appendChild(thead);var tr = document.createElement('tr');thead.appendChild(tr);var th = document.createElement('th');tr.appendChild(th);var thText = docuemnt.createElement('数据一');th.appendChild(thText);var th2 = document.createElement('th'); tr.appendChild(th2);var thText2 = document.createTextNode("数据2"); th2.appendChild(thText2);

3.使用DOM获取表格数据

 var table = document.getElementsByTagName("table")[0]; //alert(table.children[0].innerHTML);  //人员表  获取caption //alert(table.children[2].children[1].children[1].innerHTML);// 女  很不清晰  var tbody = document.getElementsByTagName("tbody")[0];  //alert(tbody);  var tr = tbody.getElementsByTagName('tr')[1];  var td = tr.getElementsByTagName('td')[1];  alert(td.innerHTML);      //女   比较清晰 但还是烦

4.使用HTML DOM表格数据

 var table = document.getElementsByTagName("table")[0];   //alert(table.caption.innerHTML);   //  人员表  获取caption   //table.caption.innerHTML="表格";  //改写caption   //alert(table.tHead);    //返回的是元素引用   // alert(table.tBodies[0]); //返回的是元素集合   //alert(table.rows.length);  //得到所有tr的行数   //alert(table.tBodies[0].rows.length); //得到tBodies下的行数   //alert(table.tBodies[0].rows[0].cells.length);   //得到tBodies下的第一行的单元格的长度   //alert(table.tBodies[0].rows[1].cells[1].innerHTML);  //女  很清晰 很方便   //table.deleteCaption();   //table.deleteTHead();   //table.tBodies[0].deleteRow(0);   //table.tBodies[0].rows[0].deleteCell(1);

5.HTML DOM 创建表格

//在创建表格的时候<table><tbody><th>标签特定，需要使用document来创建，也可以模拟已有的编写特定的函数， 例如 insertTH()之类的  var table = document.createElement('table');  document.body.appendChild(table);  table.width="300";  table.border="1";  table.createCaption().innerHTML='人员表';  var THead  = table.createTHead();  var tr = THead.insertRow(0);  tr.insertCell(0).innerHTML="数据一";  tr.insertCell(1).innerHTML="数据二";  tr.insertCell(2).innerHTML="数据三";

6.访问元素的样式

//元素的样式三种表示方法：//行内：就是在标签i的style属性添加的样式//内联：就是<style>标签里书写的样式//链接：通过<link href>标签链接到的样式   //使用行内style获取属性    var box = document.getElementById('box');    //alert(box.style);       //alert(box.style.color);    // alert(box.style.fontSize);    //alert(box.style.background);    //alert(box.style.float);     //alert(box.style.cssFloat);  //非IE浏览器对关键字保留的做法    //alert(box.style.styleFloat);  //IE浏览器的调用方式    //alert(box.style.cssFloat||box.style.styleFloat);//跨浏览器兼容

7.创建元素的样式

  var box = document.getElementById('box');    box.style.color='red';    box.style.fontSize='20px';    box.style.background="#ccc";      box.style.cssFloat="right"; //IE不支持    box.style.styleFloat="right"  //IE支持    //兼容    typeof box.style.cssFloat='undefined'? box.style.background="#ccc": box.style.cssFloat="right";

//DOM2级为style提供了一些属性方法    var box = document.getElementById('box');    //alert(box.style.cssText);   //查看CSS文本  都兼容  //alert(box.style.length)    //box.style.setProperty('color','blue');   //设置    box.style.removeProperty('color');   //移除alert(box.style.color); //style属性只能获取和设置行内，不能获取内联和链接

8.获取计算后的样式

 var box = document.getElementById('box');   //alert(box.style.fontSize);   //var style = window.getComputedStyle(box,'null');   //alert(style.fontSize);   //计算后的样式，一般表示默认样式和设置后的样式   //alert(style.color);   var style = box.currentStyle;   //alert(style.color);      //alert(style.fontSize)   //兼容   var style =window.getComputedStyle?window.getComputedStyle(box,'null'):null||box.currentStyle;   //alert(style);   // alert(window.getComputedStyle?window.getComputedStyle(box,'null'):null);   // alert(style.fontSize);   //alert(style.border.)  //border这个属性计算后就不存在了    //alert(style.border.TopStyle)  //计算样式的获取，不仅仅可以获取没有设置的默认样式，也可以获取行内，内联和链接  //因为不管你在哪里设置CSS，最终都会驻留在浏览器的计算样式里

获取链接样式

//alert(document.implementation.hasFeature('StyleSheets','2.0'));  //是否支持DOM2级样式表    var link = document.getElementsByTagName('link')[0];    //alert(link);  //HTMLLinkElement    var sheet = link.sheet;    //IE不兼容    //alert(sheet);  //CSSStyleSheet ,表示链接的css样式表对象    //为了兼容IE    var sheet = link.sheet||link.styleSheet;    alert(sheet);//更加简便的获取sheet的方法    ////document.styleSheets得到StyleSheetList集合(这个属性所有浏览器都支持)    var sheet = document.styleSheets[0];     // alert(sheet);       //alert(sheet.disabled=true);   //设置样式被禁用    //alert(sheet.href);     var sheet = document.styleSheets[0];      //     //样式的规则就是，一群样式的集合表示规则     //alert(sheet.cssRules);  //CSSRuleList     //alert(sheet.cssRules[0]); //CSSStyleRule  得到第一个规则     //alert(sheet.cssRules[0].cssText); //得到第一个规则的CSS文本     //alert(sheet.cssRules[0].selectorText);//得到第一个规则的选择符   #box     //sheet.deleteRule(0);  //删除第一条规则     //sheet.insertRule('body{background-color:red}',0); //添加一条规则在第一个位置上     //非IE获取Rules  sheet.cssRules     //IE获取Rules   alert(sheet.rules);     //非IE删除第一条规则  sheet.deleteRule(0)；     //IE删除第一条规则   sheet.removeRule(0);     //非IE添加一条规则  sheet.insertRule('body{background-color:red}','0');     //IE添加一条规则    sheet.addRule('body','background-color:red','0');     //跨浏览器兼容获取rules     // var rules = sheet.cssRules||sheet.rules;     //alert(rules);    //跨浏览器兼容删除第一条规则    //deleteRule(sheet,0);    //跨浏览器兼容添加第一条规则      //insertRule(sheet,'body','background-color:red',0);    //跨浏览器兼容删除第一条规则    function deleteRule(sheet,position){      if (sheet.deleteRule) {        sheet.deleteRule(position);      }else if(sheet.removeRule){        sheet.removeRule(position);      }    }     //跨浏览器兼容添加第一条规则     function insertRule(sheet,selectorText,cssText,position){        if (sheet.insertRule) {            sheet.insertRule(selectorText+'{'+cssText+'}',position);        }else if(sheet.addRule){            sheet.addRule('selectorText','cssText',position);        }     }

0 0