AssertOnException: Jquery - Select only one cell in a column when it is clicked

Say I have a requirement that select only one cell in a column. It means, we have reset the other cells in the same column. (Cell uniqueness). Below is the sample code. (you can also mimic this with row uniqueness).

<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() {

                    var pos = $(this).parent('tr').children().index($(this));
                    $('#biddingtable tr').each(function() {
                        $(this).children().each(function() {
                            var currentPos = $(this).parent('tr').children().index($(this));
                            if(pos == currentPos){
                                $(this).css('background-color', '#FFFFFF');
                                var newHtml = $(this).text();
                                $(this).html(newHtml.replace('Click Here!!!', ''));
                            }
                        });
                    });

                    $(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>

AssertOnException

Jquery - Select only one cell in a column when it is clicked

No comments:

Post a Comment

Labels