javascript
javascript学习1---用dom对象动态控制表格
????????????????????
????? 利用dom對象模型的屬性和方法可以很輕松的控制頁面上的元素，包括增加刪除等。而對于表格，html DOM還提供了一套專用的特性，使得操作更加方便。動態控制表格的方法，包括添加刪除表格的行，列，單元格等。
常用dom操作：
| ? | 針對<table>元素 | ? |
| 1 | caption | 指向<caption>元素（如果存在） |
| 2 | tBodies | 指向<body>元素的集合 |
| 3 | tHead | 指向<head>元素（如果存在） |
| 4 | rows | 指向所有行的集合 |
| 5 | deleteRow(position) | 刪除指定位置上的行 |
| 6 | insertRow(position) | 在rows集合的指定位置插入一個新的行 |
| 7 | createCaption() | 創建一個<caption>并放入表格中 |
| 8 | deleteCaption() | 刪除<caption>元素 |
| ? | 針對<tbody>元素 | ? |
| 9 | rows | <tbody>中的所有行的集合 |
| 10 | deleteRows(position) | 刪除指定位置上的行 |
| 11 | insertRows(position) | 在rows集合中的指定位置插入一個新行 |
| ? | 針對<tr>元素 | ? |
| 12 | cells | <tr>中所有單元格的集合 |
| 13 | deleteCell(position) | 刪除給定位置上的單元格 |
| 14 | insertCell(position) | 在cells集合的給定位置上插入一個新的單元格 |
?
Html文件如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
?<HEAD>
? <TITLE> tableTest </TITLE>
?
? <style>
???? .dataList{
???????? border:1px solid #0058a3;
??????? ?font-family:Arial;
??????? ?border-collapse:collapse;
??????? ?background-color:#eaf5ff;
??????? ?font-size:14px;
??? ? }
??? ? .dataList caption{
???????? padding-bottom:5px;
??????? ?font:bold 1.4em;
??????? ?text-align:left;
??? ? }
??? ? .dataList th{
???????? border:1px solid #0058a3;
??????? ?background-color:#4bacff;
??????? ?color:#ffffff;
??????? ?font-weight:bold;
??????? ?padding-top:4px;
??????? ?padding-bottom:4px;
??????? ?padding-right:12px;
??????? ?padding-left:12px;
??? ? }
??? ? .dataList td{
???????? border:1px solid #0058a3;
??? ???? text-align:left;
??????? ?padding-top:4px;
??????? ?padding-bottom:4px;
??????? ?padding-right:10px;
??????? ?padding-left:10px;
??? ? }
?
? </style>
?
?</HEAD>
?
?<BODY>
? <table id="table" class="dataList" >
???????? <caption>表格測試</caption>
???????? <tr><th>姓名</th><th>年齡</th><th>手機</th><th>地址</th></tr>
??? ???? <tr><td>張三</td><td>22</td><td>22</td><td>杭州市西湖區</td></tr>
??? ???? <tr><td>李四</td><td>33</td><td>33</td><td>33</td></tr>
??? ???? <tr><td>王五</td><td>44</td><td>44</td><td>44</td></tr>
?
? </table>
?
?</BODY>
</HTML>
?
?
?
?
1.?????? 動態增加表格行
var otr = document.getElementById(“table”).insertRow(2);
var atext = new Array();
atext[0] = document.createTextNode(“gdfafffa”);
atext[1] = document.createTextNode(“fsffs”);
atext[2] = document.createTextNode(“fsafa”);
atext[3] = document.createTextNode(“fsdfaf”);
atext[4] = document.createTextNode(“13224321”);
for(var i=0;i<atext.length;i++){
var otd = otr.insertCell(i);
otd.appendChild(atext[i]);
}
?
2.?????? 動態改變單元格內容
?? ?<script language = "javascript" >
???? var table = document.getElementById("table");
??? ?table.rows[2].cells[2].innerHTML = "我niu";
</script>
?
3. 動態刪除行
??? ?<script language = "javascript" >??????
???? Function myDelete(){
???? var table = document.getElementById("table");
??? ?//刪除該行， 根據dom父子節點的關系
???? this.parentNode.parentNode.parentNode.removeChild(“this.parentNode.parentNode”);
????? }
????
???? //動態增加delete鏈接
???? Window.οnlοad=function(){????
??????????? Var otable =document.getElementById(“table”);
??????????? Var otd;
??????????? //動態添加delete鏈接
??????????? for(var i=0;i<otable.rows.length;i++){
??????????????? otd = otable.rows[i].insertCell(5);
??????????????? otd.innerHTML = “<a href=‘#’>delete</a>”
??????????????? otd.firstChild.onclinck = myDelete; //添加刪除事件?
}
????????
???? }
?
</script>
?
?
?
?
4.???? 刪除列
???? //自定義刪除列函數
???? Function deleteColumn(otable,inum){
???????? For（var i=0;i<otable;i++）
?????????? Otable.rows[i].deleteCell(inum);
???? }
???? //調用
???? Window.onload = function(){
??????? var otable = document.getElementById(“table”);
??????? deleteCoumn(otable,2)
????? }
?
?
轉載于:https://www.cnblogs.com/alaricblog/p/3278307.html
總結
以上是生活随笔為你收集整理的javascript学习1---用dom对象动态控制表格的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Deep Learning基础理论－－C
- 下一篇： 国家哀悼日网站变灰的样式