一、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>JS基础13-DOM访问表格子元素的常用属性和方法
原文地址：https://www.cnblogs.com/LuckyGJX/p/8654759.html