This blog defines GridView using jQuery.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" temp_src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script><script>
$('#add').click(function () {
AddRow({});
});
var AddRow = function () {
$('#tbl:first').clone().hide().insertBefore('#tbl:first').slideDown(function () {
for (i = 0; i < element.length; i++) {
$.each($(this).find(element[i]), function () {
switch ($(this).attr('type')) {
case 'text':
case 'select-one':
case 'textarea':
case 'hidden':
case 'password':
$(this).val('');
break;
case 'checkbox':
case 'radio':
$(this).attr('checked', false);
break;
}
});
}
});
}
</script>
<table width="100%" id="tbl">
<thead>
<tr>
<td class="tdclass" width="50%" align="left">
</td>
<td class="tdclass" width="17%" align="left">
</td>
<td class="tdclass" width="10%" align="left">
</td>
<td class="tdclass" width="10%" align="left">
</td>
<td class="tdclass" width="2%" align="right">
<img src="Myimage.jpg" temp_src="Myimage.jpg" onclick="AddRow();" style="cursor: pointer"
title="Add" id="add">
</td>
</tr>
</thead>
<tbody>
<input type="hidden" value="1" id="hsb">
<tr id="tr1">
<td colspan="2">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="50%">
<input type="text" class="input" name="ata[]" id="ata1" value="" size="20" maxlength="100" />
</td>
<td width="17%">
<input type="text" class="input" name="ca[]" id="ca1" value="" size="55" maxlength="100" />
</td>
<td width="10%">
<select name="atc[]" class="input" id="atc1">
<option value="Subhankar">Subhankar</option>
<option value="Anil">Anil</option>
</select>
</td>
<td width="10%">
<select name="aca[]" class="input" id="aca1">
<option value="Pandey">Pandey</option>
<option value="Sharma">Sharma</option>
</select>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table

Join the conversation! Your thoughts help the community grow.