原文地址为:
用JavaScript,获取Table中指定的行、列
转载请注明本文地址: 用JavaScript,获取Table中指定的行、列
前言:
先要谢谢George Wing的慷慨赠书《悟透JavaScript》,让我更加感受到了技术交流的重要性,呵呵~
进入正题,面试题中有一题:如何通过JavaScript获取Table中指定行、列的值? 因为JavaScript是如此的易考,且使用方法即为灵活,不得不防。而最好的办法莫过于:掌握它们!
方法解析:
首先布置环境:用Html构建3*3的Table,一个服务器控件TextBox,用于接收获取的Table值,一个Button,触发获取值的事件。详见代码:
代码
<
head
runat
="server"
>
< title > 演示获取Table的值 </ title >
< script type ="text/javascript" language ="javascript" >
// Description: 演示用JavaScript,获取Table中指定行、列元素值
// CopyRight: http://www.cnblogs.com/yangmingming
// Notes: 采用简单的Table,并结合TextBox获取之
function GetTable23()
{
var txt = document .getElementById ( " txtReceiver " );
// 第一种:用标记id的td元素,获取值方法
txt .value = document .getElementById ( " 23 " ).innerHTML ;
// 第二种:用获取Table(通过其id),指定获取的行、列
var valueTd = document .getElementById ( " tbl " ).rows [ 1 ].cells[ 2 ];
txt.value = valueTd.innerHTML ;
}
</ script >
</ head >
< body >
< form id ="form1" runat ="server" >
< div >
< table style ="width: 100%;" id ="tbl" >
< tr >
< td >
11
</ td >
< td >
12
</ td >
< td >
13
</ td >
</ tr >
< tr >
< td >
21
</ td >
< td >
22
</ td >
< td id ="23" >
23
</ td >
</ tr >
< tr >
< td >
31
</ td >
< td >
32
</ td >
< td >
33
</ td >
</ tr >
</ table >
< asp:TextBox ID ="txtReceiver" runat ="server" ></ asp:TextBox >
< input id ="btnSubmit" type ="button" value ="获取" onclick ="GetTable23()" ; />
</ div >
</ form >
</ body >
</ html >
< title > 演示获取Table的值 </ title >
< script type ="text/javascript" language ="javascript" >
// Description: 演示用JavaScript,获取Table中指定行、列元素值
// CopyRight: http://www.cnblogs.com/yangmingming
// Notes: 采用简单的Table,并结合TextBox获取之
function GetTable23()
{
var txt = document .getElementById ( " txtReceiver " );
// 第一种:用标记id的td元素,获取值方法
txt .value = document .getElementById ( " 23 " ).innerHTML ;
// 第二种:用获取Table(通过其id),指定获取的行、列
var valueTd = document .getElementById ( " tbl " ).rows [ 1 ].cells[ 2 ];
txt.value = valueTd.innerHTML ;
}
</ script >
</ head >
< body >
< form id ="form1" runat ="server" >
< div >
< table style ="width: 100%;" id ="tbl" >
< tr >
< td >
11
</ td >
< td >
12
</ td >
< td >
13
</ td >
</ tr >
< tr >
< td >
21
</ td >
< td >
22
</ td >
< td id ="23" >
23
</ td >
</ tr >
< tr >
< td >
31
</ td >
< td >
32
</ td >
< td >
33
</ td >
</ tr >
</ table >
< asp:TextBox ID ="txtReceiver" runat ="server" ></ asp:TextBox >
< input id ="btnSubmit" type ="button" value ="获取" onclick ="GetTable23()" ; />
</ div >
</ form >
</ body >
</ html >
其调试结果为:
可见我们如期获得了第二行、第三列的值。
综述之,对JavaScript的不断深化学习,是必要而迫切的。在现有资料和网络的帮助下,争取尽早实现对其的深层理解,以及应用。呵呵~
转载请注明本文地址: 用JavaScript,获取Table中指定的行、列