Jquery - How do you change the content of a cell when it is clicked

Below is the sample code

<html>
    <head>
        <title>Karthick putting up a sample</title>
        <style type="text/css">
            table, table tr, table tr td { border:1px solid red; }
        </style>
        <script src="jquery-1.4.3.min.js" type="text/javascript"></script>

        <script type="text/javascript">
            $(function() {
                                //your static html
                var htmlToBeAdded = '<br/><a href="#">Click Here!!!</a>';
                    $('#biddingtable tr td').click(function() {

                    $(this).css('background-color', '#FFFF99');
                    var innertext = $(this).html();
                    $(this).html(innertext + htmlToBeAdded);
                                        
                    });
                });

        </script>
    </head>

    <body>
        <table id="biddingtable">
            <tr>
                <th>Vendors</th>
                <th>Product 1</th>
                <th>Product 2</th>
                <th>Service 1</th>
                <th>Project 1</th>
                <th>Project 2</th>
            </tr>
            <tr>
                <td>Brainless Baby</td>
                <td>776,967.75</td>
                <td></td>
                <td>984.75</td>
                <td>984.75</td>
                <td></td>
            </tr>
            <tr>
                <td>Brainless Baby</td>
                <td>776,967.75</td>
                <td></td>
                <td>984.75</td>
                <td>984.75</td>
                <td></td>
            </tr>
        </table>
    </body>
</html>

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)