<!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(){
$('input').change(function(){
c_val = parseInt($(this).val())+(parseInt($(this).val())*2)/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');
});
});
</script>
</head>
<table class="editableTable">
<thead>
<tr>
<td>MRP</td>
<td>MSP</td>
<td>B2G</td>
</tr>
</thead>
<tbody>
<tr>
<td>100</td>
<td><input data-msp="0" type="text"></td>
<td class="last"></td>
</tr>
<tr>
<td>50</td>
<td><input data-msp="0" type="text"></td>
<td></td>
</tr>
<tr>
<td>120</td>
<td><input data-msp="0" type="text"></td>
<td></td>
</tr>
<tr>
<td>160</td>
<td><input data-msp="0" type="text"></td>
<td></td>
</tr>
<tr>
<td></td>
<td class="total"></td>
<td></td>
</tr>
<tr>
<td><input type="submit" value="submit" class="submit"></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</html>
<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(){
$('input').change(function(){
c_val = parseInt($(this).val())+(parseInt($(this).val())*2)/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');
});
});
</script>
</head>
<table class="editableTable">
<thead>
<tr>
<td>MRP</td>
<td>MSP</td>
<td>B2G</td>
</tr>
</thead>
<tbody>
<tr>
<td>100</td>
<td><input data-msp="0" type="text"></td>
<td class="last"></td>
</tr>
<tr>
<td>50</td>
<td><input data-msp="0" type="text"></td>
<td></td>
</tr>
<tr>
<td>120</td>
<td><input data-msp="0" type="text"></td>
<td></td>
</tr>
<tr>
<td>160</td>
<td><input data-msp="0" type="text"></td>
<td></td>
</tr>
<tr>
<td></td>
<td class="total"></td>
<td></td>
</tr>
<tr>
<td><input type="submit" value="submit" class="submit"></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</html>
No comments:
Post a Comment