Shalvin Interests

Tuesday, March 15, 2016

JQuery Basic Selectors


<html>
<head>
    <title></title>
    

    <script src="jquery-1.12.1.js"></script>
    <script>
        $(document).ready(
            function () {
                $("#btnNoRow").click(function()
                {
                    alert($('tr').length);
                });

                $("#btnNoData").click(function () {
                    alert($('td').length);
                });

                $("#btnRed").click(function () {
                   $('tr').css('background-color', 'red')
                });

                $("#btnTable").click(function () {
                    alert($('table').html())
                });

                $("#btnData").click(function () {
                    alert($('table').text())
                });
            });
    </script>
</head>
<body>
    <table border="1">
        <tr>
            <td>Shalvin</td>
            <td>Praseed</td>
            <td>Vaisakh</td>
        </tr>
        <tr>
            <td>Biju</td>
            <td>Joshy</td>
            <td>Akhil</td>
        </tr>
        <tr>
            <td>Merin</td>
            <td>Soorya</td>
            <td>Sreelakshmi</td>
        </tr>
        <tr>
            <td>Simi</td>
            <td>Simon</td>
            <td>Shibin</td>
        </tr>
        <tr>
            <td>JavaScript</td>
            <td>JQuery</td>
            <td>AngularJS</td>
        </tr>
    </table>
    <br /><br />
    <div>
        DIV 1
        <br />
        <a href="http://shalvinpd.blogspot.com">Shalvin P D</a>
    </div>
    <br /><br />
    <a href="http://google.com">Google</a>
    <br /><br />
    <div>DIV 2</div>
    <br /><br />
    <span>SPAN 1</span>
    <br /><br />
    <div>DIV 3</div>

    <input id="btnNoRow" type="button" value="No of Table Rows" />

    <input id="btnNoData" type="button" value="No of Table Datas" />

    <input id="btnRed" type="button" value="Make Table Red" />

    <input id="btnTable" type="button" value="Show Table" />

    <input id="btnData" type="button" value="Show Table Data" />
</body>
</html>

No comments:

Post a Comment