Sunday, 21 September 2014

With JQuery Create Dynamic Rows to table

JQuery:

function itemRowsCreation(){
$('#itemsCount').keyup(function(){
   if(!isNaN($('#itemsCount').val())){
    $('#itemsCount').attr("readonly",true);
    var rowCount = $("#itemsTable tbody tr").length;
    if(rowCount == 0){
    $('#itemsTable tbody').empty();
for(var i = 1; i <= $('#itemsCount').val(); i++)
$('#itemsTable tbody').append("<tr id=row-"+i+"><td>"+i+" Row</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td><a href=#  id="+i+" onclick=itemRowDeletion('"+i+"')>Delete</a></td></tr>");
}
}
   else $('#itemsCount').val('');
});
}

function itemRowDeletion(rowId){
$('#itemsTable tbody tr').each(function(){
if($(this).attr('id')=="row-"+rowId){
$(this).remove();
$('#itemsCount').val(parseInt($('#itemsCount').val())-1);
}
});
if($("#itemsTable tbody tr").length==0) $('#itemsCount').attr("readonly",false);
}

HTML:

Item count as text field which contains id itemsCount

<input type="text" id="itemsCount"/>

Table:

<table  border="1" align="left" id="itemsTable" style="border:1px solid #000; border-collapse:collapse; width:1000px;">
<thead>
<tr style="background:#000; color:#fff;">
<th width="69"><div align="left">SNO </div></th>
<th width="170"><div align="left">BC Item Code </div></th>
<th width="162"><p align="left">BC Description</p>
  <p align="left">&nbsp;</p></th>
<th width="137"><div align="left">Quantity</div></th>
<th width="122"><div align="left">Weight</div></th>
<th width="102"><p align="left">NBD</p></th>
<th width="192"><div align="left">Remarks</div></th>
</tr>
</thead>
<tbody></tbody>
</table>

At Initial:


After Entering count

After Deletion



No comments:

Post a Comment