用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的不斷深化學習,是必要而迫切的。在現有資料和網絡的幫助下,爭取盡早實現對其的深層理解,以及應用。呵呵~   

 

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM