DOM访问表格子元素的常用属性和方法

来源:互联网 发布:巨人网络最新招聘信息 编辑:程序博客网 时间:2024/05/17 22:35

DOM访问表格子元素的常用属性和方法


通过rows[index]返回表格的行的属性





<html><head><title>00</title></head><body><table id="mytable" border="1"><caption>海通科技课程</caption><tr><td>C</td><td>C++</td></tr><tr><td>Android</td><td>Java</td></tr><tr><td>Python</td><td>.NET</td></tr></table><input type="button" value="表格标题" onclick="testbutton1(mytable.caption)"/><br/><br/><input type="button" value="第一行、第一格"onclick="testbutton1(mytable.rows[0].cells[0])"/><br/><br/><input type="button" value="第二行、第二格"onclick="testbutton1(mytable.rows[1].cells[1])"/><br/><br/><input type="button" value="第三行、第二格"onclick="testbutton1(mytable.rows[2].cells[1])"/><br/><br/>设置指定单元格的值:第<input type="text" id="row" size="2"/>行,<input type="text" id="cel" size="2"/>列,改为<input type="text" id="course" size="10"/><input type="button" id="btn_set" value="修改" onclick="testbutton2()"/><br/><br/><hr/><input type="text" id="video" size="20"/><script type="text/javascript" charset="utf-8">var videotext=document.getElementById("video");var mytable=document.getElementById("mytable");var text1=document.getElementById("row");var text2=document.getElementById("cel");var text3=document.getElementById("course");function testbutton1(target){videotext.value=target.innerHTML;}function testbutton2(){var a1=text1.value;var a2=text2.value;var a3=text3.value;mytable.rows[a1-1].cells[a2-1].innerHTML=a3;}</script></body></html>