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> </td><td> </td><td> </td><td> </td><td> </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"> </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:
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> </td><td> </td><td> </td><td> </td><td> </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"> </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