當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
javascript表格操作的快捷方法
生活随笔
收集整理的這篇文章主要介紹了
javascript表格操作的快捷方法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、表格的組成-<table>
表格式html中最復雜的標簽之一，它的層次關系為table>thead/tbody/tfoot>tr>td,我們當然可以根據每一個標簽創建一個javascript對象，然后將對象根據這個層次結構添加到父級結構中去，但是這樣的操作很麻煩，javascript專門提供了操作表格的相關屬性個方法。
二、javascript操作表格的屬性和方法
1、<table>元素所對應的屬性和方法
??? caption? tBodies? tHead? tFoot?? rows?
??? createTHead()?? deleteTHead()
??? createTFoot()??? deleteTFood()
??? createCaption()??? deleteCaption()
??? insertRow(postion)?? deleteRow(position)
2、<tbody>元素對應的屬性和方法
??? rows
??? insertRow(posiyion)?? deleteRow(position)
3、<tr>元素的屬性和方法
??? cells
??? insertCell(position)?? deleteCell(position)
三、實例演示
先創建一個html文檔，內容如下：
<!doctype?html><head> ????<meta?charset="utf-8"?/> ????<title>表格操作演示</title> ????<script?type="text/javascript"?src="table.js"></script> </head>
<body> ????<p?id="create"?onclick="createTable()">創建表格</p>
????<div?id="createTable">
????</div> </body>
然后添加javascript代碼，如下：
function?createTable()?{ ????var?div?=?document.getElementById("createTable"); ????var?table?=?document.createElement("table");?//創建一個表格 ????div.appendChild(table); ????table.style.border?=?"1px?red?solid";????//表頭 ????var?thead?=?document.createElement("tbody");?//創建一個表頭 ????thead.appendChild(document.createTextNode("表格的標題頭"));?//給白頭添加文字內容 ????table.appendChild(thead);
????//表格主體 ????var?tbody?=?document.createElement("tbody");?//創建表的主體
????var?row0?=?tbody.insertRow(0);?//創建第一行 ????row0.insertCell(0).appendChild(document.createTextNode("張三")); ????row0.insertCell(1).appendChild(document.createTextNode("男")); ????row0.insertCell(2).appendChild(document.createTextNode("23")); ????var?row1?=?tbody.insertRow(1);?//創建第二行 ????row1.insertCell(0).appendChild(document.createTextNode("李四")); ????row1.insertCell(1).appendChild(document.createTextNode("女")); ????row1.insertCell(2).appendChild(document.createTextNode("25")); ????table.appendChild(tbody);
????//表尾 ????table.createTFoot().appendChild(document.createTextNode("這是表格的尾部"));
}
最后的運行結果為：
總結
以上是生活随笔為你收集整理的javascript表格操作的快捷方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： steam泰坦之旅dlc_《泰坦之旅：周
- 下一篇： AD9851电路设计