js获取table表格指定行列td单元格内容
分类：实例代码
js实现的在实际应用中可能需要获取指定行列的td单元格中的内容，下面就通过代码实例介绍一下如何实现此功能。
代码如下:获取table表格指定行列td单元格内容
<!DOCTYPE html><html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
.table{
width:100%;
padding:0px;
margin:0px;
font-family:Arial, Tahoma, Verdana, Sans-Serif,宋体;
border-left:1px solid #ADD8E6;
border-collapse:collapse;
}
/*表头样式。*/
.table th{
font-size:12px;
font-weight:600;
color:#303030;
border-right:1px solid #ADD8E6;
border-bottom:1px solid #ADD8E6;
border-top:1px solid #ADD8E6;
letter-spacing:2px;
text-align:left;
padding:10px 0px 10px 0px;
white-space:nowrap;
text-align:center;
overflow: hidden;
}
.table td {
border-right:1px solid #ADD8E6;
border-bottom:1px solid #ADD8E6;
background:#fff;
font-size:12px;
padding:3px 3px 3px 6px;
color:#303030;
word-break:break-all;
word-wrap:break-word;
white-space:normal;
}
</style>
<script type="text/javascript">
window.onload=function(){
var otable=document.getElementById("box");
var odiv=document.getElementById("show");
function done(obj,row,col){
var rows=obj.rows;
var otd=rows[row].cells[col];
return otd.innerHTML;
}
odiv.innerHTML=done(otable,1,0)
}
</script>
</head>
<body>
<table id="box" class="table">
<thead>
<tr>
<th>前端教程网一</th>
<th>前端教程网二</th>
</tr>
</thead>
<tr>
<td>javascript教程</td>
<td>jQuery教程</td>
</tr>
<tr>
<td>HTML教程</td>
<td>div css教程</td>
</tr>
</table>
<div id="show"></div>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.window.onload=function(){}，当文档内容完全加载完毕再去执行函数中的代码。
（2）.var otable=document.getElementById("box")，获取id属性值为box元素，这里就是table表格。
（3）.var odiv=document.getElementById("show")，获取id属性值为show的元素，这里就是底部的div元素。
（4）.function done(obj,row,col){}，此函数可以获取表格指定行列的td单元格内容，obj参数是table表格对象，row表示行，col表示列，行和列的索引都是从0开始的。
（5）.var rows=obj.rows获取表格的行集合。
（6）.var otd=rows[row].cells[col]，获取指定行列的单元格。
（7）.return otd.innerHTML，获取td单元中的内容。
（8）.odiv.innerHTML=done(otable,1,0)，显示指定行列单元格的内容。
二.相关阅读:
（1）.rows可以参阅js rows属性一章节。
（2）.cells可以参阅javascript cells一章节。
（3）.innerHTML可以参阅js innerHTML一章节。