用JavaScript,擷取Table中指定的行、列

來源:互聯網
上載者:User

前言:

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

 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.