Create Editable table in HTML using Jquery.
In HTML, Like a text-box element it is not possible to write content in table's td element from browser it self. But it is possible from Jquery. In every click event of td element we will update it with text-box. Lets see how to do that...
In normal HTML it is not possible to write content in table's td element from browser it self.
If we use the Jquery methods and some CSS classes ,Then it is possible.
First of all we will take a normal HTML table code it like this below.
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<table>
next we can go to the jquery coding for editing td element.
That is in each click of td element we will update its html with a text box element. And using CSS we need to remove that text box default borders and all styles. Then it is not visible in td. It should be like editing of td element
Jquery code:
$(document).ready(function()
{
$('table td').click(function()
{
if($(this).find('input').length==0)
{
$(this).html('<input class="text" type="text" value="'+
$(this).text()+
'" style="width:'+$(this).width()+'px;"/>');
$(this).find('.text').focus().select(false);
rebindEvents();
}
});
});
function rebindEvents()
{
$('.text').unbind().bind('blur',function()
{
$($(this).parent(0)).html($(this).val());
});
}
CSS Code:
table
{
border:1px solid black;
border-collapse: collapse;
font-family: verdana;
font-size: 12px;
}
table td {
border:1px solid black;
height:40px;
min-width:40px;
padding:5px;
}
.text
{
height:20px;
width:40px;
border:none;
}
hi Siva, this is nice, but supposed,it may be addable row means,Editable will not works.is there solutions please