This post is all about javascript and editable HTML table. There are many operations we perform on HTML table using Javascript. such as editable cells, adding rows, deleting rows, Drag and drop, Navigation, search etc. This post will explain every thing with demo and code.
Demos and examples on creating editable table

1. Creating Editable cell in HTML table

$(function () {
    $("td").dblclick(function () {
        var OriginalContent = $(this).text();

        $(this).addClass("cellEditing");
        $(this).html("");
        $(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");
    });
    });
});
[jsfiddle url=”http://jsfiddle.net/ExA3j/8/” height=”150px” include=”result,html,js”]

The above jQuery code will make the cell editable on cell double-click. Add class to table cell and put the above jQuery in head. This jQuery make the table editable o double-click. After editing the cell you can press enter key to change values. You can use Ajax to send the changes to database.

Code for Ajax

$(this).children().first().keypress(function (e) {
	if (e.which == 13) {
		var fullContent = $(this).val();
	        $(this).parent().html(fullContent);
	        $(this).parent().removeClass("cellEditing");
	        //Call the server side file to communicate with database.
	        var URL = '/callfile.php' ;
	        //alert (URL);
	        var xmlhttp;    
	        if (window.XMLHttpRequest){
                        // code for IE7+, Firefox, Chrome, Opera, Safari
	        	xmlhttp=new XMLHttpRequest();
	        }
	        else{
                        // code for IE6, IE5
	        	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	        }
	        xmlhttp.onreadystatechange=function(){
                       // if successfully done it will return status 200
	        	if (xmlhttp.readyState==4 && xmlhttp.status!=200){
	        		alert ('Can not update comment. Contact admin')
	        	}

	       }
	        xmlhttp.open("GET",URL,true);
	        xmlhttp.send();
	}
});

2. Add / Delete rows in HTML table

If you want to add a row in table on button click you can use append() functions to add row in table.

$('button').live('click' , function(event){
	var $row = (" 6  class6  school6  ");
	$('#example').append($row);
	});

There are scenarios where we have to add row from one table to another and delete it first table. This example will show how we can add a row in one table from another table.

$('#example tbody tr td').live('click' , function(event){
	var $row = $(this).closest('tr');
	$(this).closest("tr").remove(); // remove row
	$('#example2').append($row);
	});

$('#example2 tbody tr td').live('click' , function(event){
	var $row = $(this).closest('tr');
	$(this).closest("tr").remove(); // remove row
	$('#example').append($row);
        });

3. Get table content in form on mouse click

There are times when you need to get all table contents in form to edit. This could be done by calling function on row click or any button click. Below is the code which explains how you could do that.

$(document).ready(function(){
	$('#htmlgrid tbody tr td').on('click', 'a', function(event){

		var first_cell = $('td:eq(0)', $(this).parent().parent()).text();
		var second_cell = $('td:eq(1)', $(this).parent().parent()).text();
		var third_cell = $('td:eq(2)', $(this).parent().parent()).text();

		var answer = prompt('Please enter your Password', '');
		if (answer!=null){
			answer=$.trim(answer);
			answer=answer.toUpperCase();
			password = $.trim(answer);
			password_from_db = password_from_db()
			if(password==password_from_db){
				document.forms[0].elements['first_cell'].value = first_cell;
				document.forms[0].elements['second_cell'].value = second_cell;
				document.forms[0].elements['third_cell'].value = third_cell;
			}
		}
			else{
				alert('wrong_password');	
			}
	});
});

4. Hiding table row using jQuery

There are many ways to hide table rows. You can either use jQuery or CSS.
This is jQuery code which will hide first and second th and td of table.

<$(document).ready(function() {
	$('td:nth-child(0),th:nth-child(0)').hide();
	$('td:nth-child(1),th:nth-child(1)').hide();
});

To hide table row using CSS you can use “display:none”

 this td will be hidden

 

Some external jQuery plugins for table

 

1. Filterable jQuery plugin for tables

Bootstrap and X-editable themed jQuery plugin that performs per-column filtering for an HTML table.
filterable jQuery plugin

2. jQuery plugin to freeze table header

freeze table header using jQuery

3.jQuery plugin for fixed header and scrolling html table

The scrolling tables with fixed headers. and will take the exercise a step further by creating a jQuery plugin to keep the code contained in one location and allow users to call the “chromatable()” method on any table, or many tables on the same page.

To make the plugin work, you’ll need to add the following to the head of your HTML:

	

Then, call the chromatable() method on any table within your code, for example:

$(document).ready(function(){
$("#yourTableID").chromatable();
});

You can modify the table’s height and width by adding the following lines:

$("#yourTableID2").chromatable({

width: "900px",
height: "400px",
scrolling: "yes"

});

Download

 

4. Highlighting html table using simple jQuery

highlight rows and columns in html table

5. jQuery to hover over rows and columns in html table

jQuery for hover rows and columns in table

6.Drag and drop in html table

simple drag and drop jQuery plugin

7. Dynamically hover table column on mouse click part 1

Dynamic column and row select on click

8. Dynamically hover table column on mouse click part 2

Dynamic column select on click

9. Using check box in html table using javascript

using checkbox in table

Single checkbox functionality for table rows.

$('table tr').click(function() {

 checkBox = $(this).children('td').children('input[type=checkbox]');

 if(checkBox.attr('checked'))
  checkBox.attr('checked', '');
 else
  checkBox.attr('checked', 'checked');
});

Functionality to check/uncheck all checkbox in our table by clicking only one checkbox

$('.check-all').click(function() {

 checkBox = $('table tr').children('td').children('input[type=checkbox]');

 if($(this).attr('checked'))
  checkBox.attr('checked', 'checked');
 else
  checkBox.attr('checked', ''); 
});

10. simple Drag and Drop using jQuery

HTML code for drag and drop column

col1 col2 col3 col4
156 668 100.95 1.82
256 668 100.95 1.82
COL1 COL2 COL3 COL4
356 668 100.95 1.82
456 668 100.95 1.82

CSS code for drag and drop

ul li {
    min-width: 200px;
}
.dragging li.ui-state-hover {
    min-width: 240px;
}
.dragging .ui-state-hover a {
    color:green !important;
    font-weight: bold;
}
th,td {
    text-align: right;
    padding: 2px 4px;
    border: 1px solid;
}
.connectedSortable tr, .ui-sortable-helper {
    cursor: move;
}
.connectedSortable tr:first-child {
    cursor: default;
}
.ui-sortable-placeholder {
    background: yellow;
}

jQuery code for Drag and Drop

$(document).ready(function() {
    $tabs = $(".tabbable");

    $('.nav-tabs a').click(function(e) {
        e.preventDefault();
        $(this).tab('show');
    })

    $( "tbody.connectedSortable" )
        .sortable({
            connectWith: ".connectedSortable",
            items: "> tr:not(:first)",
            appendTo: $tabs,
            helper:"clone",
            zIndex: 999990,
            start: function(){ $tabs.addClass("dragging") },
            stop: function(){ $tabs.removeClass("dragging") }
        })
        .disableSelection()
    ;

    var $tab_items = $( ".nav-tabs > li", $tabs ).droppable({
      accept: ".connectedSortable tr",
      hoverClass: "ui-state-hover",
      over: function( event, ui ) {
        var $item = $( this );
        $item.find("a").tab("show");

      },
      drop: function( event, ui ) {
        return false;
      }
    });

});
[jsfiddle url=”http://jsfiddle.net/Kzf62/514/” height=”300px” include=”result,html,js,css”]