Table对象
常用集合
| 集合 | 描述 |
|---|---|
| cells[] | 返回包含表格中所有单元格的一个数组。 |
| rows[] | 返回包含表格中所有行的一个数组。 |
| tBodies[] | 返回包含表格中所有 tbody 的一个数组。 |
常用属性
| 属性 | 描述 |
|---|---|
| caption | 对表格的 <caption> 元素的引用。 |
| tFoot | 返回表格的 TFoot 对象。如果不存在该元素，则为 null。 |
| tHead | 返回表格的 THead 对象。如果不存在该元素，则为 null。 |
常用方法
| 方法 | 描述 |
|---|---|
| createCaption() | 为表格创建一个 caption 元素。 |
| createTFoot() | 在表格中创建一个空的 tFoot 元素。 |
| createTHead() | 在表格中创建一个空的 tHead 元素。 |
| deleteCaption() | 从表格删除 caption 元素以及其内容。 |
| deleteRow() | 从表格删除一行。 |
| deleteTFoot() | 从表格删除 tFoot 元素及其内容。 |
| deleteTHead() | 从表格删除 tHead 元素及其内容。 |
| insertRow() | 在表格中插入一个新行。 |
table操作
<script type="text/javascript">
var table = document.createElement('table');
table.border = 1;
table.width = 300;
var caption = table.createCaption();
caption.innerHTML = "人员表"
table.appendChild(caption);
var thead = table.createTHead();//crate后就自动添加到table里了
var tr1 = thead.insertRow(0);//插入tr
var td1_1 = tr1.insertCell(0);
var td1_2 = tr1.insertCell(1);
td1_1.innerHTML = "tr1.insertCell_td1_1";
td1_2.innerHTML = "tr1.insertCell_td1_2";
var tr2 = table.insertRow(0);//tr集合的第一个位置,包括thead,tbody,tfoot的tr
var td2_1 = tr2.insertCell(0);//插入td
var td2_2 = tr2.insertCell(1);
td2_1.innerHTML = "tr2.insertCell_td2_1";
td2_2.innerHTML = "tr2.insertCell_td2_2";
tr2.deleteCell(1);//删除第二个td
var tbody = document.createElement("tbody");//table没有createTBody方法
var tr3 = tbody.insertRow();
var td3_1 = tr3.insertCell(0);
var td3_2 = tr3.insertCell(1);
td3_1.innerHTML = "tr3.insertCell_td3_1";
td3_2.innerHTML = "tr3.insertCell_td3_2";
table.appendChild(tbody);//需要手动append,这个tbody会在tfoot之后
var tfoot = table.createTFoot();//crate后就自动添加到table里了
var tr4 = tfoot.insertRow();
var td4_1 = tr4.insertCell(0);
var td4_2 = tr4.insertCell(1);
td4_1.innerHTML = "tr4.insertCell_td4_1";
td4_2.innerHTML = "tr4.insertCell_td4_2";
tfoot.deleteRow(0);//删除tfoot第一个tr
table.deleteRow(0);//删除tr集合中的第一行
table.deleteCaption();//删除caption
table.deleteTHead();//删除table的thead
table.deleteTFoot();//删除table的tfoot
document.body.appendChild(table);
</script>
样式
访问元素的样式
任何HTML元素标签都会有一个通用的属性：style。它会返回CSSStypeDeclaration对象。
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box" style="color:red;font-size:12px;"></div>
</body>
<script type="text/javascript">
var box = document.getElementById('box');//获取box
console.log(box.style);//CSSStyleDeclaration
console.log(box.style.color);//red
console.log(box.style.fontSize);//12px
box.style.setProperty("border","1px");//添加和设置属性
box.style.removeProperty('color');//移除某个熟悉
box.style.cssText = "background-color:blue";//设置style属性
console.log(box.style.backgroundColor);//blue
</script>
</html>
getComputedStyle()和currentStyle能获取行内样式，内嵌样式或者外部样式，不过只可以读
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#box{
color:red;font-size:12px;
}
</style>
</head>
<body>
<div id="box" style=""></div>
</body>
<script type="text/javascript">
var box = document.getElementById('box');//获取box
var style = window.getComputedStyle ?
window.getComputedStyle(box, null) : null || box.currentStyle;
console.log(style.color);//rgb(255, 0, 0);
style.cssText = "background-color:blue";//报错
</script>
</html>
操作样式表
添加删除className
<script type="text/javascript">
var box = document.getElementById('box');//获取box
//判断是否存在这个class
function hasClass(element, className) {
return element.className.match(new RegExp('(\\s|^)'+className+'(\\s|$)'));
}
//添加一个class，如果不存在的话
function addClass(element, className) {
if (!hasClass(element, className)) {
element.className += " "+className;
}
}
//删除一个class，如果存在的话
function removeClass(element, className) {
if (hasClass(element, className)) {
element.className = element.className.replace(new RegExp('(\\s|^)'+className+'(\\s|$)'),' ');
}
}
addClass(box,"class1");
addClass(box,"class2");
removeClass(box,"class1");
</script>
添加删除css规则
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#box{
color:red;font-size:12px;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
<script type="text/javascript">
//为了添加CSS规则，并且兼容所有浏览器，我们必须写一个函数：
var sheet = document.styleSheets[0];
/*
//也可以通过以下方式获取相应sheet
var link = document.getElementsByTagName('link')[0]; //HTMLLinkElement
var style = document.getElementsByTagName('style')[0]; //HTMLStyleElement
var sheet = style.sheet || style.styleSheet;
var sheet = link.sheet || link.styleSheet;
*/
var rules = sheet.cssRules || sheet.rules;
console.log(rules[0].selectorText);//#box
console.log(rules[0].style.color);//red
console.log(rules[0].cssText);//#box { color: red; font-size: 12px; }
rules[0].cssText = "#box {background-color:red}";//无效
function insertRule(sheet, selectorText, cssText, position) {
//如果是非IE
if (sheet.insertRule) {
sheet.insertRule(selectorText + "{" + cssText + "}", position);
//如果是IE
} else if (sheet.addRule) {
sheet.addRule(selectorText, cssText, position);
}
}
insertRule(sheet, "#box", "background-color:red;", 0);//在第一个位置新建一个规则
console.log(rules[0].selectorText);//#box
console.log(rules[0].style.backgroundColor);//red
//为了删除CSS规则，并且兼容所有浏览器，我们必须写一个函数：
function deleteRule(sheet, index) {
//如果是非IE
if (sheet.deleteRule) {
sheet.deleteRule(index);
//如果是IE
} else if (sheet.removeRule) {
sheet.removeRule(index);
}
}
deleteRule(sheet, 0);//删除第一个规则
console.log(rules[0].selectorText);//#box
console.log(rules[0].style.color);//red
</script>
</html>
总结：三种操作CSS的方法，第一种可操作style行内样式，可读可写；第二种可操作行内、内联和链接，使用getComputedStyle或currentStyle，可读不可写；第三种cssRules或rules，可操作内联和链接，可读可写。