I have personally tried my level best to make an editable jQuery table which can do the following:
1. Edit a table Cell (TD)
2. Enter Only Numeric Value
3. Replace Clicked TD Value with New Entered One
4. You will have Row Sum as well as Column Sum.
Here are the steps to follow:
1. Create a folder named "Tedit" and Create a new PHP file in "Tedit" folder, named "index.php".
2. Paste following code in "index.php"
PHP Code:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Functional Table Edit</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.tedit.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".editableTable").tedit();
});
</script>
</head>
<body>
<div>
<table class="editableTable" id="editableTable">
<thead>
<tr>
<th>First</th>
<th>Second</th>
<th>Third</th>
<th>Fourth</th>
<th>Sum</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td class="sum" id="sum">0</td>
</tr>
<tr>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td class="sum" id="sum">0</td>
</tr>
<tr>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td class="sum" id="sum">0</td>
</tr>
<tfoot>
<tr>
<td class="isum" id="isum">Total:</td>
<td class="isum" id="isum">Total:</td>
<td class="isum" id="isum">Total:</td>
<td class="isum" id="isum">Total:</td>
<td class="isum" id="isum">Total:</td>
</tr>
</tfoot>
</tbody>
</table>
</div>
</body>
</html>
3. Once done create a new file named "style.css" and place in the same folder named "Tedit" and paste the following CSS code:
PHP Code:
@charset "utf-8";
/* CSS Document */
* {
font-family:Consolas
}
.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:rgb(255,253,210);
}
.jclass {
float:left;
margin-left:10px;
}
.mclass {
float:left;
font-weight:bold;
}
.sclass {
float:left;
font-weight:bold;
margin-right:10px;
}
.gclass {
float:left;
font-weight:bold;
margin-right:10px;
}
4. Create a new folder name it "js" and place it in the same folder you have already created with the help of Allah named "Tedit".
5. Create a new JS file and name it "jquery.tedit.js", paste the following code in current JS file:
PHP Code:
/*Numerical Check Function*/
function isNumberKey(evt){
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true; }
/*End of Numerical Check*/
/*Calculate Column Sum Function*/
function calculateColumn(index){
var total = 0;
$('table tr').each(function()
{
var value = parseInt($('td', this).eq(index).text());
//alert(value);
if (!isNaN(value))
{
total += value;
}
});
$('table tfoot td').eq(index).text('Total: ' + total);
}
/*Calculating ColumnSum*/
function columnsum()
{
$('table thead th').each(function(i)
{
calculateColumn(i);
});
}
/*End of ColumnSum*/
/*Calculating Row Sum*/
function rowsum()
{
$("tr").each(function() {
$tr_row++;
//alert($tr_row);
$("td",this).each(function() {
$abc = $(this).index();
});
});
//alert($abc);
$("tr").each(function() {
$tr_row++;
//alert($tr_row);
$("td",this).each(function() {
//$td_row++;
if($(this).index() == $abc)
{
} else {
$a += parseInt($(this).html());
}
});
$("td:last",this).html($a)
$a = 0;
});
}
/*End of RowSum Function*/
/*Plugin Main Starts Here*/
(function($){
$.fn.tedit = function() {
// set some defaults
var defaults = {
/*grand_class: 'gclass',
edit_table: 'editableTable',
sub_class: 'sclass',
sum_class:'sum'*/
};
//var options = $.extend({}, defaults, options);
/*This function calculates last index of rows and tds of clicked row*/
$("tr").each(function() {
$("td",this).each(function() {
$last_index = $(this).index();
$row_last = $(this).parent().index('tr');
});
});
//alert($row_last);
/*End of Function*/
$("td").click(function () {
if (($(this).index() == $last_index) || ($(this).parent().index('tr') == $row_last))
{
} else {
var OriginalContent = $(this).text();
var td_Index = $(this).index();
//alert(td_Index);
//var row_index = $(this).parent().index('tr');
//alert('Row # '+(row_index)+' Cell# '+(td_Index));
//$(this).addClass("cellEditing");
$(this).html("<input type='text' value='" + OriginalContent + "' onkeypress='return isNumberKey(event)'/>");
$(this).children().first().focus();
}
$(this).children().first().keypress(function (e) {
$tr_row = 0;
$td_row = 0;
$a=0;
if(e.which == 13) {
var newContent = $(this).val();
if (newContent == "")
{
newContent = 0;
$(this).parent().text(newContent);
//$(this).parent().removeClass("cellEditing");
rowsum();
columnsum();
}
else
{
$(this).parent().text(newContent);
//$(this).parent().removeClass("cellEditing");
rowsum();
columnsum();
}
}
});
$(this).children().first().blur(function(){
var newContent = $(this).val();
if (newContent == "")
{
newContent = 0;
$(this).parent().text(newContent);
//$(this).parent().removeClass("cellEditing");
rowsum();
columnsum();
}
else
{
$(this).parent().text(newContent);
//$(this).parent().removeClass("cellEditing");
rowsum();
columnsum();
}
});
});
};
})(jQuery);
Now open index.php file in your browser and see how it works.