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>
相關文章
- python 操作 Excel 表格PythonExcel
- java操作excel表格JavaExcel
- 使用Java操作Excel表格JavaExcel
- 前端_JavaScript_物件導向程式設計前端JavaScript物件程式設計
- Spread表格元件For JAVA功能介紹—表格相關操作元件Java
- layui 表格操作匯入檔案UI
- 表格單元格點選操作(彈窗)
- 怎麼做表格在電腦上怎麼操作 在電腦上做表格的操作方法介紹
- Excel 2019表格操作技巧彙總 一秒鐘輕鬆製作各種表格Excel
- 安卓版 Google Sheets 表格應用支援滑鼠操作安卓Go
- Element-UI的table表格的樣式的常用的操作UI
- VOL表格動態新增操作按鈕及彈窗確認方法
- 會計老婆大人的前端小跟班兒——node 操作 Excel 表格前端Excel
- 表格資料處理的2種寫法,偽元素和操作dom
- 生成表格與合併表格
- 表格
- Poi向Word插入表格,設定表格邊框和表格居中
- VUE-表格佈局、表格查詢、工具欄、表格、分頁欄Vue
- 前端 javascript 練習題--表格的操作及進度條的實現【千鋒】前端JavaScript
- 表格 、背景
- markdown表格
- word(2010)使用VBA完成批處理操作-批量清除表格某單元格內容
- element-UI庫Table表格匯出Excel表格UIExcel
- JavaScript動態建立表格和增加表格的行JavaScript
- python對excel檔案中指定表格的指定列資料進行去重複操作。PythonExcel
- sap strans 表格
- 表格識別
- 表格佈局
- 自定義表格
- markdown 表格形式
- Element-ui元件庫Table表格匯出Excel表格UI元件Excel
- opencv 表格識別之表格透視矯正(一)OpenCV
- 舉例說明表格中如何再巢狀表格巢狀
- 表格轉文字如何實現-表格文字識別介面整合示例-快速提取表格中的文字
- Excel表格底色怎麼去掉?去除Excel表格底色的方法Excel
- excel表格文字識別-ocr表格文字提取api介面整合ExcelAPI
- 初學 Bootstrap 表格boot
- PHPExcel 讀取表格PHPExcel
- 原生表格元件--GridManager元件