Simple Jquery Plugin: Editable Table

Create Only index.html

Just double click on td and you can edit as well as enter to save

click on clone and make copy of the same table

click on print and get print copy of your table/page as pdf

click on reset it will refresh your page

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Editable table with jQuery</title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function () {
 $("td").dblclick(function () { 
 var OriginalContent = $(this).text();
$(this).addClass("cellEditing");
$(this).html("<input type='text' value='" + OriginalContent + "' />");
$(this).children().first().focus();
$(this).children().first().keypress(function (e) { if (e.which == 13) { var newContent = $(this).val(); 
$(this).parent().text(newContent); 
$(this).parent().removeClass("cellEditing"); } });
$(this).children().first().blur(function(){ $(this).parent().text(OriginalContent);
$(this).parent().removeClass("cellEditing"); 
});
}); 
});
</script>
<style>
.smallBox {
 float: left;
 margin: 10px;
 padding: 10px;
 width: 79%;
 background:#ddd;
}
.smallBox2 {
 float: right;
 margin: 10px;
 padding: 10px;
 width: 79%;
 background:#ccc;
}
.button_container {
}
body {
 background:#333;
}
.main_wrapper {
 margin:auto;
 padding:20px;
 background:#eee;
 overflow:auto;
}
.table_container {
 padding:10px;
 float:left;
 width:40%;
 margin:10px;
}
.mybutton {
 background: #1b1b1b;
 border: 1px solid #333;
 box-shadow: 1px 1px 1px 1px #000;
 color: #fff;
 cursor: pointer;
 float: left;
 margin: 10px;
 padding: 2px 27px;
 text-align: center;
}
.editableTable {
 border:solid 1px;
 width:100%
}
.editableTable td {
 border:solid 1px;
}
.editableTable .cellEditing {
 padding: 0;
}
.editableTable .cellEditing input[type=text] {
 width:100%;
 border:0;
 background-color:#0099FF;
 color:#fff;
}
</style>
</head>
<body>
<div class="main_wrapper">
  <h3> Editable Table</h3>
  <p>Just double click on td and you can edit as well as enter to save</p>
  <p>click on clone and make copy of the same table</p>
  <p>click on print and get print copy of your table/page as pdf</p>
  <p>click on reset it will refresh your page</p>
  <div class="table_container">
    <div class="button_container">
      <div class="mybutton" id="cloneButton1">Clone</div>
      <div class="mybutton" onClick="myFunction()" id="pr">Print</div>
      <div class="mybutton"  id="reset">Reset</div>
    </div>
    
    <div class="smallBox">
      <table class="editableTable">
        <thead>
          <tr>
            <th>S.No</th>
            <th>Name</th>
            <th>Email</th>
            <th>Phone</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>001</td>
            <td>Ram Kumar</td>
            <td>ram.ku@gmail.com</td>
            <td>(91) 9999-8888</td>
          </tr>
          <tr>
            <td>002</td>
            <td>Shyam Kumar</td>
            <td>shyam.gk@gmail.com</td>
            <td>(91) 8787-8686</td>
          </tr>
          <tr>
            <td>003</td>
            <td>Mohan Kumar</td>
            <td>mohan.yk@gmail.com</td>
            <td>(91) 3232-3232</td>
          </tr>
        </tbody>
      </table>
    </div>
    
  </div>
  
</div>

<script type="text/javascript">
 
    $("#reset").click(function () {
   location.reload();
    });
 
    $("#cloneButton1").click(function () {
  
   $('.smallBox').clone().insertAfter(".smallBox");
   
    });
 function myFunction() {
    window.print();
}

$("#pr").click(function(){
        $(".button_container").hide();
    });
    
 </script>
</body>
</html>

Thursday, 20 August 2015

Editable Table

Create Only index.html

No comments:

Post a Comment