用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 >

其调试结果为：

 

 

  可见我们如期获得了第二行、第三列的值。

 

 综述之，对JavaScript的不断深化学习，是必要而迫切的。在现有资料和网络的帮助下，争取尽早实现对其的深层理解，以及应用。呵呵~  

 

转载于:https://www.cnblogs.com/yangmingming/archive/2010/03/26/1697137.html