DOM访问表格子元素的常用属性和方法
2017-12-08 08:25
471 查看
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>
通过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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- w3c dom 常用元素属性和方法
- DOM访问表单控件常用属性和方法
- js基础之DOM中元素对象的属性方法详解
- DOM常用属性和方法
- AJAX 学习笔记(5) 处理XML文档的DOM元素属性和遍历DOM元素方法
- javascript--DOM对象模型的常用操作属性和方法（转载）
- DOM的基础，属性以及常用方法
- JS操作DOM元素属性和方法（转）
- 比较有用的常用dom对面属性&方法
- JS操作DOM元素属性和方法（转）
- DOM常用属性、方法备忘录
- jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解
- JS操作DOM元素属性和方法
- 常用元素的属性/方法 attr / val / html /text
- DOM常用API、属性、方法、函数
- JS操作DOM元素属性和方法
- IE与DOM下访问内联样式和外部样式表的常用方法总结
- 处理XML文档的DOM元素属性和方法
- vue获取DOM元素并设置属性的两种实现方法
- javascript--DOM对象模型的常用操作属性和方法