Very Simple jQuery plugins

Yes here we are looking some very simple jQuery plugins. This are simple but very useful to achieving something bigger.

1)  Move table rows with arrows in jQuery?

Se this is also Very Simple jQuery plugins, move table rows in up or down on click of “Up/Down” arrows or “link”.

 

 

 

 

 

Html code

<table>
      <tr>
        <td>One</td>
        <td>
             <a href=”#”>Up</a>
             <a href=”#”>Down</a>
        </td>
     </tr>
     <tr>
         <td>Two</td>
         <td>
             <a href=”#”>Up</a>
             <a href=”#”>Down</a>
        </td>
    </tr>
    <tr>
      <td>Three</td>
      <td>
            <a href=”#”>Up</a>
            <a href=”#”>Down</a>
        </td>
    </tr>
    <tr>
       <td>Four</td>
       <td>
            <a href=”#”>Up</a>
            <a href=”#” class=”down”>Down</a>
        </td>
    </tr>
    <tr>
        <td>Five</td>
          <td>
            <a href=”#”>Up</a>
            <a href=”#”>Down</a>
        </td>
    </tr>
</table>

Jquary

$(document).ready(function(){
    $(“.up,.down”).click(function(){
      var row = $(this).parents(“tr”);
      if ($(this).is(“.up”)) {
	    row.insertBefore(row.prev());
      } 
      else {
    	row.insertAfter(row.next());
      }
    });
});

2)  Add table row as first child in jQuery

The Simple and best method to add new rows to a table as the first row. After using this you will definitely find that it is relay Very Simple jQuery plugin.

 

 

 

Note: we can add new row as last row of table but in UX point of view it will not user-friendly in table with lots of pages.

Html

<button class=”addRowButton”>Add Row</button>
<table id=”myTable”>
<tbody>
 <tr>
   <td>1</td>
 </tr>
 <tr>
   <td>2</td>
 </tr>
 <tr>
   <td>3</td>
 </tr>
</table>

Jquery

Add tr as first child of table

 

 

 

$(document).ready(function(){
  $(‘.addRowButton’).click(function(){$(‘<tr><td>Stuff</td></tr>’).insertBefore(‘table tbody tr:first’);
  });
});

Add tr as last child of table

 

 

 

$(document).ready(function(){
  $(‘.addRowButton’).click(function(){
    $(‘table tbody tr:last’).after(‘<tr><td>Stuff</td></tr>’);
  });
});

 3)  Check if an element is hidden with jQuery

Yes it is possible to do some operations only with visible elements. by finding elements are visible or hidden.

Html

<div id="checkme" style="display:none">
   Inner Text
</div>
<div>Visible Div</div>

 jQuery

$(document).ready(function() {
  if ($("#checkme:hidden").length) {
    alert('Hidden');
  }
});

4)  Find the check box is checked or not
Do some actions like show/hide elements on change of checkbox.
HTML

<input type="checkbox" name="Active Checked" checked id="activeChecked"> Active

 jQuery

$("#activeChecked").change(function(){
        if($(this).prop('checked') == true)
      {
         alert("Checked Box Selected");
      }
     else
     {
         alert("Checked Box deselect");
     }
});