Jquery Navigation Menu: Editable Table

Create only index.html

Editable table with clone,print,edit,save,reset

<!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