zoukankan      html  css  js  c++  java
  • 用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=" 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的不断深化学习,是必要而迫切的。在现有资料和网络的帮助下,争取尽早实现对其的深层理解,以及应用。呵呵~   

    原文:http://www.cnblogs.com/yangmingming/archive/2010/03/26/1697137.html

  • 相关阅读:
    $.unique()去重问题
    js判断中文
    js URL中文传参乱码
    zabbix添加nginx监控
    TCP/IP与OSI参考模型原理
    100个linux系统常用指令
    read指令使用方法
    grep与正则表达式使用
    shell脚本中case的用法
    shell脚本:变量,文件判断,逻辑运算等纪要
  • 原文地址:https://www.cnblogs.com/azhqiang/p/5258070.html
Copyright © 2011-2022 走看看