Pages

Thursday 27 March 2014

To get row values and column values using comma seperator

<!Doctype>
<html>
<head>
<!--<style>
* {
    font-family:Consolas
}

.editableTable {
    border:solid 1px;
    width:100%
}

.editableTable td {
    border:solid 1px;
}

.editableTable .cellEditing {
    padding: 0;
}

.editableTable .cellEditing input[type=text]{
    width:100%;
    border:0;
    background-color:rgb(255,253,210);
}

.invalid{
border:1px solid red !important;
}

.edited{
    background: url("tick.png") no-repeat scroll right center rgba(0, 0, 0, 0);
}

.excess{
background:red;
}
.modified{
border:3px solid green !important;
}
</style>
-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(function(){
function AddExpenses(){

$('#expenses tbody').append("<tr><td><input type='text'></td><td><input type='text' value='0' class='last'></td></tr>");

}
$('#btn_AddExpense').bind('click',AddExpenses)
$('.last').live('change',function(){
  tot = 0;
  $('.last').each(function(){
   if($(this).val() > 0){
   tot += parseInt($(this).val());
   }  
  });
//  alert(tot);
  $('.total').val(tot);
});
 /*
 $('input').change(function(){
 //alert($('#mval').val());
  c_val = parseInt($(this).val())+(parseInt($(this).val())*$('#mval').val())/100;
  if(isNaN(c_val)){
  c_val = 0;
  }
  $(this).parent().parent().children().last().html(c_val);
 
 
  if($(this).val() != $(this).attr('data-msp')){
    $(this).addClass('modified');
  }
 
  if($(this).val() <= 0){
   $(this).val($(this).attr('data-msp'));
 
  }
 
  if(c_val > parseInt($(this).parent().prev().html())){
   $(this).parent().parent().addClass('excess');
  }else{
   $(this).parent().parent().removeClass('excess');
  }
  tot = 0;
  $('input').each(function(){
   if($(this).val() > 0){
   tot += parseInt($(this).val());
   }  
  });
  $('.total').html(tot);
 });

 $('.submit').click(function(){
  $('input').removeClass('modified');
 });
 */

 $('.save').click(function(){
   /*$('.down_loop tr').each(function(){
    all = '';
    $(this).children().each(function(){
  all += $(this).find('input').val()+',';
});
alert(all);
   });*/
   rows = 4;
   for(r=1;r<=rows;r++){
     all = '';
    $('.clas'+r).each(function(){
  all += $(this).val()+',';
});
$('.final'+r).val(all.slice(0,-1));
   }
 });

});
</script>
</head>
<input type="button" id="btn_AddExpense" value="ADD">
<table class="editableTable" id="expenses">
<thead>
<tr>
<td>Expenses Name</td>
<td>Expenses Value</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text"></td>
<td><input type="text" class="last" value="0"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text" class="last" value="0"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text" class="last" value="0"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text" class="last" value="0"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text" class="last" value="0"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td><input type="text" class="total" value="0"></td>
</tr>
</tfoot>
</table>
<table class="editableTable" id="margins">
<thead>
<tr>
<td>slab from</td>
<td>slab to</td>
<td>Min %</td>
<td>Left Out Margin</td>

</tr>

</thead>
<tbody class="down_loop">
<tr>
<td><input type="text" class="clas1" value=">0"></td>
<td><input type="text" class="clas2" value="<=2"></td>
<td><input type="text" class="clas3" value="0"></td>
<td><input type="text" class="clas4" value="0"></td>
</tr>
<tr>
<td><input type="text" class="clas1" value=">2"></td>
<td><input type="text" class="clas2" value="<=5"></td>
<td><input type="text" class="clas3" value="0"></td>
<td><input type="text" class="clas4" value="3"></td></tr>
<tr>
<td><input type="text" class="clas1" value=">5"></td>
<td><input type="text" class="clas2" value="<=10"></td>
<td><input type="text" class="clas3" value="0"></td>
<td><input type="text" class="clas4" value="5"></td></tr>
<tr>
<td><input type="text" class="clas1" value=">10"></td>
<td><input type="text" class="clas2" value="<=15"></td>
<td><input type="text" class="clas3" value="0"></td>
<td><input type="text" class="clas4" value="10"></td></tr>
<tr>
<td><input type="text" class="clas1" value=">15"></td>
<td><input type="text" class="clas2" value="<=20"></td>
<td><input type="text" class="clas3" value="3"></td>
<td><input type="text" class="clas4" value="20"></td></tr>
</tbody>
</table>
<input type="hidden" class="final1" value="">
<input type="hidden" class="final2" value="">
<input type="hidden" class="final3" value="">
<input type="hidden" class="final4" value="">
<input type="submit" value="Save" class="save">
</html>
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)