SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Learning...
    Join Date
    Jan 2003
    Posts
    778
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jquery object help

    Code:
     
    jQuery.fn.checkBoxTableHighlighter = function(){
     return this.each(function() {  
      var $obj = $(this);
      var jsObj = this; 
      var $table = $("tr > td", this);
     alert($table.attr("tag")); //coming up as undefined 
      if(jsObj.tagName.toLowerCase() == "input" && jsObj.type.toLowerCase() == "checkbox"){
       //actions on check box
      }
      else if(jsObj.tagName.toLowerCase() == "table"){
       //actions on table
     
       //on page load, highlight rows for a table that has a specified selector
          $obj.children().filter(':has(:checkbox:checked)').closest("tr").addClass(defaults.highlightClass);
          //on page load, remove high light for the check boxes that are not checked
          $obj.children().filter(':has(:checkbox:not:checked)').closest("tr").removeClass(defaults.highlightClass);
          //check box clicked with the specified table css selector
          $obj.children().filter(':has(:checkbox)').click(function (e) { 
           highlight.CheckBoxRowSelect(e, $(this));
          });
          //check box keyup with the specified table css selector
          $obj.children().filter(':has(:checkbox)').keyup(function (e) {
              highlight.CheckBoxRowSelect(e, $(this));
          });
      }
     
     
     
     
     });
    };
    call:
    Code:
    $(".someItem").checkBoxTableHighlighter();
    When the check box is checked (onload, click or keyup), if the table has a specified selector then i want to change the background color. I already have a working sample that i am converting to plugin. Since, my selector is at the table level, how can i find the checkboxes that are inside tr and td?
    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...
    Join Date
    Jan 2003
    Posts
    778
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have changed to following and still no luck:

    Call
    Code:
    $(".tableHighlightSelector tr td").checkBoxTableHighlighter();
    Code:
     
    return this.each(function() { 
    var $obj = $(this);
    var jsObj = this; 
    if(jsObj.tagName.toLowerCase() == "input" && jsObj.type.toLowerCase() == "checkbox"){
    //actions on check box
    }
    else if(jsObj.tagName.toLowerCase() == "table" || jsObj.tagName.toLowerCase() == "tr" || jsObj.tagName.toLowerCase() == "td"){
    //actions on table
    //on page load, highlight rows for a table that has a specified selector
    $obj.filter(':has(:checkbox:checked)').closest("tr").addClass(defaults.highlightClass);
    //on page load, remove high light for the check boxes that are not checked
    $obj.filter(':has(:checkbox:not:checked)').closest("tr").removeClass(defaults.highlightClass);
    //check box clicked with the specified table css selector
    $obj.filter(':has(:checkbox)').click(function (e) { 
    highlight.CheckBoxRowSelect(e, $(this));
    });
    //check box keyup with the specified table css selector
    $obj.filter(':has(:checkbox)').keyup(function (e) {
    highlight.CheckBoxRowSelect(e, $(this));
    });
    }
     
     
     
     
    });
    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...
    Join Date
    Jan 2003
    Posts
    778
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have simplified it:

    Call:
    Code:
    $(".tableHighlightSelector tr td input[type='checkbox']").checkBoxTableHighlighter();
    Code:
    Code:
    return this.each(function() {  
      var $obj = $(this);
      var jsObj = this; 
      $obj.closest("tr").addClass("rowhighlight");
     
     });
    closest tr is now coming up as undefined.

    HTML:
    Code:
    <tablewidth="300px"class="tableHighlightSelector">
    <tr>
    <tdcolspan="2">Group 2</td>
    </tr>
    <tr>
    <tdwidth="20px"><inputtype="checkbox"name="group2"value="a"checked="checked"/></td>
    <td>A</td>
    </tr>
    <tr>
    <tdwidth="20px"><inputtype="checkbox"name="group2"value="b"/></td>
    <td>B</td>
    </tr>
    <tr>
    <tdwidth="20px"><inputtype="checkbox"name="group2"value="c"/></td>
    <td>C</td>
    </tr>
    <tr>
    <tdwidth="20px"><inputtype="checkbox"name="group2"value="d"/></td>
    <td>D</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...

  4. #4
    Learning...
    Join Date
    Jan 2003
    Posts
    778
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am using jquery 1.6.1.
    The beauty of life is not dependent on how happy you are,
    but on how happy others can be because of you...

  5. #5
    Learning...
    Join Date
    Jan 2003
    Posts
    778
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    fixed, here is the full plugin:

    call:
    Code:
    //when the check box is checked then the row will get highlighted. If it  gets unchecked then the row highlighting will be removed
    $("input[name='somename']").checkBoxTableHighlighter();
    //to uncheck the check boxes and clear highlighting
    $("input[name='somename']").checkBoxTableHighlighter('clear');
    plugin:
    Code:
    jQuery.fn.checkBoxTableHighlighter = function(method){
        var defaults = {  
            highlightClass: "rowhighlight"
        };  
        var methods = {
            init: function(options){
                if (options)
                    $.extend( defaults, options );
                //onload
                methods.CheckBoxRowSelect('', $(this));       
                //click
                $(this).click(function(e){
                    methods.CheckBoxRowSelect(e, $(this));
                }); 
                //keyup
                $(this).keyup(function(e){
                    methods.CheckBoxRowSelect(e, $(this));
                });
            },
            RemoveHighlightForAllNotChecked: function ($item) {
                $item.filter(':not(:checked)').closest("tr").removeClass(defaults.highlightClass);
            },
            CheckBoxRowSelect: function (e, $clicked) {
                if ($clicked.is(':checked')) {
                    $clicked.closest("tr").addClass(defaults.highlightClass);
                    methods.RemoveHighlightForAllNotChecked($('input[name=' +  $clicked.attr("name") + ']')); //when we make checkbox behave like a  radio button
                }
                else
                    $clicked.closest("tr").removeClass(defaults.highlightClass);
            },
            clear: function(){
                $(this).filter(":checked").attr("checked", false);
                methods.RemoveHighlightForAllNotChecked($('input[name=' + $(this).attr("name") + ']'));
            }
            
        };
          
        return this.each(function() { 
             
            // Method calling logic
            if ( methods[method] )
                  return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
            else if ( typeof method === 'object' || ! method )
                  return methods.init.apply( this, arguments );
            else
                  $.error( 'Method ' +  method + ' does not exist' );                 
        });
    };
    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
  •