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");
     }
});

admin

Anil Giri is the guy who can develop UI/UX with html, css and javascript and also able to create attractive and catchy UI for print media as well as for web with latest pattern and for all the major browsers and devices. I also loves blogging on web design, development and blogging.

One thought on “Very Simple jQuery plugins

  • January 15, 2017 at 8:03 am
    Permalink

    Realy very helpful post, thanks for this post.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

*