一、DOM访问表格子元素的常用属性和方法如下:
caption |
返回表格的标题对象 |
rows |
返回该表格里的所有表格行(数组) |
tbodies |
返回该表格里所有<tbody.../>元素组成的数组 |
tfoot |
返回该表格里所有<tfoot.../>元素 |
thead |
返回该表格里所有<thead.../>元素 |
二、通过rows[index]返回表格指定的行所对应的属性:
cells |
返回该表格行内所有的单元格组成的数组 |
rowIndex |
返回该表格行在表格内的索引值 |
sectionRowIndex |
返回该表格行在其所在元素(tbody,thead等元素)的索引值 |
三、通过cells[index]返回表格指定的列所对应的属性:
cellIndex |
返回该单元格在表格行内的索引值 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>DOM访问表格子元素的常用属性和方法</title> <style> #t,tr,td{ border: 1px solid black; } </style> </head> <body> <table id="t" border="1px"> <caption>甲骨文练习</caption> <tr> <td>HTML</td> <td>JavaScript</td> </tr> <tr> <td>JavaSE</td> <td>Oracle</td> </tr> <tr> <td>MySQL</td> <td>Struts2</td> </tr> </table><br> <input type="button" value="表格标题" onClick="show(test.caption)"> <input type="button" value="第一行、第一格" onClick="show(test.rows[0].cells[0])"> <input type="button" value="第二行、第二格" onClick="show(test.rows[1].cells[1])"> <input type="button" value="第三行、第二格" onClick="show(test.rows[2].cells[1])"><br> 设置指定单元格的值: 第<input type="text" id="r">行,第<input type="text" id="c">列的值为<input type="text" id="q"><input type="button" value="修改" onClick="update()"> <script type="text/javascript"> var test=document.getElementById('t'); function show(dan){ alert(dan.innerHTML); } function update(){ var a1=document.getElementById('r').value;//用户输入的行 var a2=document.getElementById('c').value; var a3=document.getElementById('q').value; test.rows[a1-1].cells[a2-1].innerHTML=a3; } </script> </body> </html>