A friend of mine asked me to create an editable data grid for him for his web application. In less than 5 minutes I made him one and he was very surprised to see it. He did know about the power of JQuery. It takes only 2 lines of code to convert a table into an editable data grid. The datagrid looks like below:
And the html code is:
And the html code is:
<html>
<head>
<title>Editable Grid Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".editableSpan").click(function(){
$(this).hide().next().show().focus();
});
$(".editableField").blur(function(){
$(this).hide().prev().show().html($(this).val());
});
});
</script>
<style>
.editableField{
display:none;
}
table.cbl
{
border-collapse:collapse;
}
table.cbl,table.cbl td,table.cbl th
{
border:1px solid black;
}
table.cbl tr.odd{
background-color:#c1c1c1;
}
</style>
</head>
<body>
<table class="cbl">
<thead>
<th width="150px">
Name
</th>
<th width="150px">
</th>
<th width="150px">
Manager
</th>
</thead>
<tbody>
<tr class="odd" height="16px">
<td><span class="editableSpan">Name1</span> <input type="text" name="name1" id="name1" class="editableField" value="Name1"/></td>
<td><span class="editableSpan">email1@abc.com</span> <input type="text" name="email1" id="email1" class="editableField" value="email1@abc.com"/></td>
<td>
<select name="manager1" id="manager1">
<option value="John">John</option>
<option value="Richard" selected="selected">Richard</option>
<option value="Mark">Mark</option>
</select>
</td>
</tr>
<tr>
<td><span class="editableSpan">Name2</span> <input type="text" name="name2" id="name2" class="editableField" value="Name2"/></td>
<td><span class="editableSpan">email2@abc.com</span> <input type="text" name="email2" id="email2" class="editableField" value="email2@abc.com"/></td>
<td>
<select name="manager2" id="manager2">
<option value="John" selected="selected">John</option>
<option value="Richard">Richard</option>
<option value="Mark">Mark</option>
</select>
</td>
</tr>
<tr class="odd">
<td><span class="editableSpan">Name3</span> <input type="text" name="name3" id="name3" class="editableField" value="Name3"/></td>
<td><span class="editableSpan">email3@abc.com</span> <input type="text" name="email3" id="email3" class="editableField" value="email3@abc.com"/></td>
<td>
<select name="manager3" id="manager3">
<option value="John" selected="selected">John</option>
<option value="Richard">Richard</option>
<option value="Mark">Mark</option>
</select>
</td>
</tr>
<tr>
<td><span class="editableSpan">Name4</span> <input type="text" name="name4" id="name4" class="editableField" value="Name4"/></td>
<td><span class="editableSpan">email4@abc.com</span> <input type="text" name="email4" id="email4" class="editableField" value="email4@abc.com"/></td>
<td>
<select name="manager4" id="manager4">
<option value="John">John</option>
<option value="Richard" selected="selected">Richard</option>
<option value="Mark">Mark</option>
</select>
</td>
</tr>
<tr class="odd">
<td><span class="editableSpan">Name5</span> <input type="text" name="name5" id="name5" class="editableField" value="Name5"/></td>
<td><span class="editableSpan">email5@abc.com</span> <input type="text" name="email5" id="email5" class="editableField" value="email5@abc.com"/></td>
<td>
<select name="manager1" id="manager1">
<option value="John">John</option>
<option value="Richard">Richard</option>
<option value="Mark" selected="selected">Mark</option>
</select>
</td>
</tr>
</tbody>
</table>
</body>
</html>
