直接上菜咯。。。
以下为 HTML 表格源码：
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 4 5 <title>JS-006-表格元素操作</title> 6 <script type="text/javascript" src="common.js"></script> 7 <script type="text/javascript" src="test.js"></script> 8 9 <link rel="stylesheet" type="text/css" href="global.css"> 10 </head> 11 12 <body> 13 <div> 14 <h4>表格操作</h4> 15 16 <ul> 17 <li>获取表格的行数：document.getElementById("study").children[0].rows.length</li> 18 <li>获取表格的列数：document.getElementById("study").children[0].rows[row].cells.length</li> 19 <li>获取单元格的值：cell.innerHTML</li> 20 <li>备注：当表格中存在单元格合并的情况下，表格的行列数会相对应减少，顺序：从上到下，从左到右</li> 21 <li> 行内合并：被合并的列对应的原值将不存在</li> 22 <li> 列内合并：被合并的行对应的原值将不存在</li> 23 </ul> 24 25 <table id="study" width="400" border="1"> 26 <tr> 27 <th></th> 28 <th>周一</th> 29 <th>周二</th> 30 <th>周三</th> 31 <th>周四</th> 32 <th>周五</th> 33 <th>周六</th> 34 <th>周日</th> 35 </tr> 36 <tr> 37 <th>第一节</th> 38 <td>政治<span sytle="color:red">test</span></td> 39 <td>物理</td> 40 <td>化学</td> 41 <td>数学</td> 42 <td>体育</td> 43 <td>游泳</td> 44 <td>钢琴</td> 45 </tr> 46 <tr> 47 <th>第二节</th> 48 <td>外语</td> 49 <td>艺术</td> 50 <td>高数</td> 51 <td>线代</td> 52 <td>马哲</td> 53 <td rowspan="3">拓展</td> 54 <td>爬山</td> 55 </tr> 56 <tr> 57 <th>第三节</th> 58 <td>厚黑</td> 59 <td>财会</td> 60 <td>音乐</td> 61 <td>美术</td> 62 <td>武术</td> 63 64 <td>攀岩</td> 65 </tr> 66 <tr> 67 <th>第四节</th> 68 <td>长安</td> 69 <td>宝马</td> 70 <td>法拉利</td> 71 <td>劳斯莱斯</td> 72 <td>悍马</td> 73 74 <td>蹦极</td> 75 </tr> 76 <tr> 77 <th>第五节</th> 78 <td>百达翡丽</td> 79 <td>江诗丹顿</td> 80 <td>宝玑</td> 81 <td>浪琴</td> 82 <td>伯爵</td> 83 <td colspan="2">CS75</td> 84 85 </tr> 86 <tr> 87 <th>第六节</th> 88 <td>selenium</td> 89 <td>python</td> 90 <td>java</td> 91 <td>TestNG</td> 92 <td>maven</td> 93 <td>jekins</td> 94 <td>fitness</td> 95 </tr> 96 <tr> 97 <th>第七节</th> 98 <td>HTML</td> 99 <td>PHP</td> 100 <td>JavaScript</td> 101 <td></td> 102 <td>XML</td> 103 <td></td> 104 <td></td> 105 </tr> 106 <tr> 107 <th>第八节</th> 108 <td>Excel</td> 109 <td></td> 110 <td>CSV</td> 111 <td>properties</td> 112 <td>md</td> 113 <td></td> 114 <td></td> 115 </tr> 116 </table> 117 118 <input class="table" id="row" type="text"><input class="table" id="col" type="text"> 119 <input id="get_table_text" type="button" value="取值" onclick="get_table_text();"><input id="t_text" type="text"> 120 <input id="get_table_text" type="button" value="改变单元格样式" onclick="change_table_css();"> 121 </div> 122 123 <div> 124 <br><br><br><br> 125 <a href="http://www.w3school.com.cn/jsref/dom_obj_style.asp" target="_blank">HTML DOM Style 对象</a> 126 </div> 127 </body> 128 </html>
以下为 HTML 源码调用 js 函数 get_table_text() 的源码：
以下为 HTML 源码调用 js 函数 change_table_css() 的源码：
以下为具体的页面展现，及获取单元格值的 js 展示：
至此， JS-006-表格元素操作 顺利完结，希望此文能够给初学 JavaScript 的您一份参考。
最后，非常感谢亲的驻足，希望此文能对亲有所帮助。热烈欢迎亲一起探讨，共同进步。非常感谢！ ^_^
原文：http://www.cnblogs.com/fengpingfan/p/4647039.html