JavaScript修改td單元格內容
本章節分享一段程式碼例項,它實現了使用javascript動態修改td單元格內容的功能。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> .datalist { border: 1px solid #429fff; /* 表格邊框 */ font-family: Arial; border-collapse: collapse; /* 邊框重疊 */ } .datalist tr:hover { background-color: #c4e4ff; /* 動態變色,IE6下無效!*/ } .datalist caption { padding-top: 3px; padding-bottom: 2px; font: bold 1.1em; background-color: #f0f7ff; border: 1px solid #429fff; /* 表格標題邊框 */ } .datalist th { border: 1px solid #429fff; /* 行、列名稱邊框 */ background-color: #d2e8ff; font-weight: bold; padding-top: 4px; padding-bottom: 4px; padding-left: 10px; padding-right: 10px; text-align: center; } .datalist td { border: 1px solid #429fff; /* 單元格邊框 */ text-align: right; padding: 4px; } </style> <script language="javascript"> window.onload=function(){ var oTable = document.getElementById("mytable"); //修改單元格內容 oTable.rows[3].cells[4].innerHTML = "www.softwhy.com"; } </script> </head> <body> <table id="mytable" class="datalist" summary="財政報表"> <caption>報表 2005 - 2008</caption> <thead> <tr> <th> </th> <th scope="col">2005</th> <th scope="col">2006</th> <th scope="col">2007</th> <th scope="col">2008</th> </tr> </thead> <tbody> <tr> <th scope="row">撥款</th> <td>11,980</td> <td>12,650</td> <td>9,700</td> <td>10,600</td> </tr> <tr> <th scope="row">捐款</th> <td>4,780</td> <td>4,989</td> <td>6,700</td> <td>6,590</td> </tr> <tr> <th scope="row">投資</th> <td>8,000</td> <td>8,100</td> <td>8,760</td> <td>8,490</td> </tr> <tr> <th scope="row">募捐</th> <td>3,200</td> <td>3,120</td> <td>3,700</td> <td>4,210</td> </tr> </tbody> <tfoot> <tr> <td colspan="5">2008 年統計</td> </tr> </tfoot> </table> </body> </html>
上面的程式碼實現了我們的要求,更多內容可以參閱相關閱讀。
相關閱讀:
(1).rows參閱JavaScript rows屬性一章節。
(2).cells參閱JavaScript cells一章節。
(3).innerHTML參閱JavaScript innerHTML一章節。
相關文章
- JavaScript 獲取td單元格內容JavaScript
- javascript動態修改單元格內容程式碼例項JavaScript
- js獲取table表格指定行列td單元格內容JS
- jquery實現的獲取指定行列td單元格內容jQuery
- JavaScript 遍歷td單元格JavaScript
- JavaScript 獲取table表格指定行和列的單元格內容JavaScript
- JavaScript 獲取表格指定td單元格JavaScript
- 如何讓excel單元格內只能輸入指定內容?Excel
- 在excel中某些單元格內批量增加相同的內容Excel
- HTML怎麼讓table表格中的td單元格內容過長顯示為固定長度,多餘部分用省略號代替?HTML
- Excel-單元格內換行Excel
- javascript實現的滑鼠懸浮當前td單元格變色效果JavaScript
- js獲取table表格指定行和列的單元格內容程式碼例項JS
- wps/excel計算單元格內的算式Excel
- td單元格合併程式碼例項
- 部落格內容規範
- word(2010)使用VBA完成批處理操作-批量清除表格某單元格內容
- excel合併單元格快捷鍵 excel多個表格內容合併到一起Excel
- jQuery獲取點選td單元格的值jQuery
- 部落格內容管理實現
- JavaScript合併表格中的內容相同的單元格JavaScript
- poi解析Excel,遍歷表結構,獲取單元格內容,拼接sql語句,寫入TXT檔案ExcelSQL
- 使用JQuery雙擊修改Table中TdjQuery
- jQuery實現的拖動調整表格td單元格的大小jQuery
- js點選當前td單元格背景變色效果詳解JS
- JavaScript單元測試框架JavaScript框架
- 1.我的第一個部落格內容
- 將Excel表格內容直接轉換成圖片Excel
- 部落格開張及本部落格內容簡介
- JavaScript單元測試及原理JavaScript
- JavaScript單元測試工具VenusJavaScript
- 如何隱藏Excel中單元格公式且其他單元格可修改Excel公式
- js遍歷迭代table表格的每一個td單元格程式碼例項JS
- excel怎麼換行在同一單元格內 excel一個框裡怎麼換行Excel
- Javascript單元測試的基礎JavaScript
- 67,表格中單元格td自適應高度,最大高度後滾動條顯示
- 動態建立table表格併為每一個td單元格註冊點選事件事件
- 通過JavaScript獲取標籤,修改標籤內容JavaScript