javascript_操作表格
版權宣告:本文為博主原創文章,轉載請註明出處。 https://blog.csdn.net/twilight_karl/article/details/62047102
表格的一些常用屬性:
caption(唯一) / tBodies / tFoot / tHead / rows / cells
一些常用方法:
createTHead() / createCaption() / deleteTHead()
獲取caption
table.caption.innerHTML
獲取tBody中的列數 (tHead/tBodies)
table.tBodies[0].rows.length
獲取行數:
table.rows.length
獲取一行的列數
table.rows[1].cells.length
deleteCaption(); 刪除caption屬性
table.deleteCaption();
deleteTHead() 刪除tHead一行
table.deleteTHead(1);
deleteRow(num) 刪除行
table.deleteRow(2);
deleteCell(num); 刪除第3行第3列的單元格
table.rows[2].deleteCell(2);
建立表格
createCaption() 建立Caption
createTHead() 建立tHead
insertRow(num) 建立行
insertCell(num) 建立列
tFoot tHead 返回引用
var table = document.createElement("table");
table.border = 1;
table.width = `300`;
var caption = table.createCaption();
caption.innerHTML = "人員資訊"; // 建立caption
var thead = table.createTHead(); // 建立thead
var tr1 = thead.insertRow(0);
tr1.insertCell(0).innerHTML = "姓名";
tr1.insertCell(1).innerHTML = "性別";
tr1.insertCell(2).innerHTML = "年齡";
var tbody = table.createTBody(0);
var tbody_tr = tbody.insertRow(0);
tbody_tr.insertCell(0).innerHTML = "張三";
tbody_tr.insertCell(1).innerHTML = "男";
tbody_tr.insertCell(2).innerHTML = "30";
var tr2 = table.insertRow(2);
tr2.insertCell(0).innerHTML = "李四";
tr2.insertCell(1).innerHTML = "男";
tr2.insertCell(2).innerHTML = "40";
document.body.appendChild(table); // 容易遺忘
建立完後再瀏覽器中檢查網頁會多出一段HTML程式碼:
<table border=1 width=300>
<caption>人員資訊</caption>
<tHead>
<tr>
<td>姓名</td>
<td>性別</td>
<td>年齡</td>
</tr>
</tHead>
<tBody>
<tr>
<td>張三</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>30</td>
</tr>
</tBody>
</table>
相關文章
- JavaScript_異常JavaScript
- DOM操作表格
- JavaScript_圖片庫JavaScript
- JavaScript_翻轉器JavaScript
- java操作excel表格JavaExcel
- JavaScript_正則例項JavaScript
- python 操作 Excel 表格PythonExcel
- 使用Java操作Excel表格JavaExcel
- tcom 操作word表格
- Spread表格元件For JAVA功能介紹—表格相關操作元件Java
- layui 表格操作匯入檔案UI
- 前端_JavaScript_物件導向程式設計前端JavaScript物件程式設計
- jQuery操作表格table程式碼例項jQuery
- Word 2003表格操作方法
- 表格單元格點選操作(彈窗)
- 怎麼做表格在電腦上怎麼操作 在電腦上做表格的操作方法介紹
- 安卓版 Google Sheets 表格應用支援滑鼠操作安卓Go
- js table表格操作大全程式碼例項JS
- javascript動態操作table表格程式碼例項JavaScript
- JavaScript學習9:DOM操作表格及樣式JavaScript
- 資料庫——基礎(資料庫操作,表格操作)——增加高階查詢資料庫
- jQuery實現的表格新增或者刪除行操作jQuery
- [python]使用xlrd對Excel表格進行讀寫操作PythonExcel
- js 封裝的自動建立表格的相關操作JS封裝
- Excel 2019表格操作技巧彙總 一秒鐘輕鬆製作各種表格Excel
- Element-UI的table表格的樣式的常用的操作UI
- 會計老婆大人的前端小跟班兒——node 操作 Excel 表格前端Excel
- 經典EL表示式和Jquery實現表格表單常用操作jQuery
- 針對Excel表格檔案操作的程式設計實現 (轉)Excel程式設計
- VOL表格動態新增操作按鈕及彈窗確認方法
- 生成表格與合併表格
- 表格資料處理的2種寫法,偽元素和操作dom
- Poi向Word插入表格,設定表格邊框和表格居中
- VUE-表格佈局、表格查詢、工具欄、表格、分頁欄Vue
- HTML表格HTML
- 前端 javascript 練習題--表格的操作及進度條的實現【千鋒】前端JavaScript
- element-UI庫Table表格匯出Excel表格UIExcel
- JavaScript動態建立表格和增加表格的行JavaScript