SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Learning... tahirjadoon's Avatar
    Join Date
    Jan 2003
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jquery - table - checkboxes

    I may have one row or multiple rows that have checkboxes.

    My selector is at the table level
    1. How can i check for all the checkboxes that are in the table, are checked and then apply the background color onload?

    2. How can i tie a click event to a check box that is inside a table row. I may have one or multiple tows?

    Thanks
    The beauty of life is not dependent on how happy you are,
    but on how happy others can be because of you...

  2. #2
    Learning... tahirjadoon's Avatar
    Join Date
    Jan 2003
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Below is my implementation, there are 2 ways this can be done:
    1. applying the css class to the check box
    2. applying the css class to the table

    Script
    Code:
    <script type="text/javascript">
    var TableRowHighlighter = {
        _tableSelector: "tableRowhighlightCB",
        _rowSelector: "rowhighlightCB",
        _tableRowHighlightClass: "highlighter",
        _applyHighlight: function($clicked){
            $clicked.closest("tr").addClass(TableRowHighlighter._tableRowHighlightClass);
        },
        _removeHighlight: function($clicked){
            $clicked.closest("tr").removeClass(TableRowHighlighter._tableRowHighlightClass);
        },
        CheckBoxRowSelect: function(e, $clicked){
            if ($clicked.attr("checked") == true) { 
                TableRowHighlighter._applyHighlight($clicked);
                TableRowHighlighter.RemoveOtherCheckBoxesHightLightSameNameNotChecked(e, $clicked);//when we make checkbox behave like a radio button
            } 
            else
                TableRowHighlighter._removeHighlight($clicked);
        },
        RemoveOtherCheckBoxesHightLightSameNameNotChecked: function(e, $clicked){
            var inputname = $clicked.attr("name");
            $('input[name='+inputname+']').each(function(){
                if($(this).attr("checked") != true)
                    TableRowHighlighter._removeHighlight($(this));
            });
        }
        
    }
    
    $(document).ready(function() {
        //check box clicked with the specified css selector
        $("." + TableRowHighlighter._rowSelector).live('click', function (e) {
            TableRowHighlighter.CheckBoxRowSelect(e, $(this));
        });
        //check box keyup with the specified css selector
        $("." + TableRowHighlighter._rowSelector).live('keyup', function (e) {
            TableRowHighlighter.CheckBoxRowSelect(e, $(this));
        });
        //check box clicked with the specified table css selector
        $("." + TableRowHighlighter._tableSelector + " tr td input[type='checkbox']").live("click", function (e) {
            TableRowHighlighter.CheckBoxRowSelect(e, $(this));
        });
        //check box keyup with the specified table css selector
        $("." + TableRowHighlighter._tableSelector + " tr td input[type='checkbox']").live("keyup", function (e) {
            TableRowHighlighter.CheckBoxRowSelect(e, $(this));
        });
        // on page load highlight rows for selected checkboxes that have a specified css selector        
        $("." + TableRowHighlighter._rowSelector + ":checked").closest("tr").addClass(TableRowHighlighter._tableRowHighlightClass);
        //on page load, highlight rows for a table that has a specified selector
        $("." + TableRowHighlighter._tableSelector + " tr td").filter(':has(:checkbox:checked)').closest("tr").addClass(TableRowHighlighter._tableRowHighlightClass);
    
    });
    </script>
    CSS
    Code:
    <style type="text/css">
        .highlighter{ background-color: aqua; }
    </style>
    HTML
    Code:
    <table class="tableRowhighlightCB">
            <tr>
                <td witdh="50px"><input name="one" type="checkbox" rel="1" value="G" /></td>
                <td witdh="200px">One</td>
            </tr>
            <tr>
                <td witdh="50px"><input name="one" type="checkbox" rel="2" value="G" /></td>
                <td witdh="200px">Two</td>
            </tr>
            <tr>
                <td witdh="50px"><input name="one" type="checkbox" rel="3" value="G" checked="checked" /></td>
                <td witdh="200px">Three</td>
            </tr>
            <tr>
                <td witdh="50px"><input name="two" type="checkbox" rel="4" value="G" /></td>
                <td witdh="200px">Four</td>
            </tr>
            <tr>
                <td witdh="50px"><input name="two" type="checkbox" rel="5" value="G" checked="checked" /></td>
                <td witdh="200px">Five</td>
            </tr>
            <tr>
                <td witdh="50px"><input name="two" type="checkbox" rel="6" value="G" /></td>
                <td witdh="200px">Six</td>
            </tr>
        </table>
    The beauty of life is not dependent on how happy you are,
    but on how happy others can be because of you...

  3. #3
    Learning... tahirjadoon's Avatar
    Join Date
    Jan 2003
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Need one help, how can i change onloads to work with "live" so that i can handle ajax content?
    The beauty of life is not dependent on how happy you are,
    but on how happy others can be because of you...

  4. #4
    Learning... tahirjadoon's Avatar
    Join Date
    Jan 2003
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cleaned up the code, i still need help with applying onload events via "live" so that these get attached to content pulled via ajax.

    Code:
    var TableRowHighlighter = {
        _tableSelector: "tableRowhighlightCB",
        _checkBoxSelector: "rowhighlightCB",
        _tableRowHighlightClass: "highlighter",
        RemoveHighlightForAllNotChecked: function ($item) {
            $item.filter(':not(:checked)').closest("tr").removeClass(TableRowHighlighter._tableRowHighlightClass);
        },
        CheckBoxRowSelect: function (e, $clicked) {
            if ($clicked.attr("checked") == true) {
                $clicked.closest("tr").addClass(TableRowHighlighter._tableRowHighlightClass);
                TableRowHighlighter.RemoveHighlightForAllNotChecked($('input[name=' + $clicked.attr("name") + ']')); //when we make checkbox behave like a radio button
            }
            else
                $clicked.closest("tr").removeClass(TableRowHighlighter._tableRowHighlightClass);
        }
    }
    
    $(document).ready(function () {
        //check box clicked with the specified css selector
        $("." + TableRowHighlighter._checkBoxSelector).live('click', function (e) {
            TableRowHighlighter.CheckBoxRowSelect(e, $(this));
        });
        //check box keyup with the specified css selector
        $("." + TableRowHighlighter._checkBoxSelector).live('keyup', function (e) {
            TableRowHighlighter.CheckBoxRowSelect(e, $(this));
        });
        //check box clicked with the specified table css selector
        $("." + TableRowHighlighter._tableSelector + " tr td input[type='checkbox']").live("click", function (e) {
            TableRowHighlighter.CheckBoxRowSelect(e, $(this));
        });
        //check box keyup with the specified table css selector
        $("." + TableRowHighlighter._tableSelector + " tr td input[type='checkbox']").live("keyup", function (e) {
            TableRowHighlighter.CheckBoxRowSelect(e, $(this));
        });
        // on page load highlight rows for selected checkboxes that have a specified css selector        
        $("." + TableRowHighlighter._checkBoxSelector + ":checked").closest("tr").addClass(TableRowHighlighter._tableRowHighlightClass);
        //on page load, highlight rows for a table that has a specified selector
        $("." + TableRowHighlighter._tableSelector + " tr td").filter(':has(:checkbox:checked)').closest("tr").addClass(TableRowHighlighter._tableRowHighlightClass);
    
    });
    The beauty of life is not dependent on how happy you are,
    but on how happy others can be because of you...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •