2016-08-28 72 views
0

我想我得到了与JS和HTML(引导)的问题, 我从bootsnip这些片段,并试图修改它需要我的工作。 但在第三行,对于错字或使用英语不好。计算选择期权价值与jQuery

这里bootsnip(我的修改):http://bootsnipp.com/snippets/o8r0G

 $(document).ready(function(){ 
 
     var i=1; 
 
    $("#add_row").click(function(){ 
 
     $('#addr'+i).html("<td>"+ (i+1) +"</td><td><input name='name"+i+"' type='text' placeholder='Name' class='form-control input-md' /> </td><td><input name='mail"+i+"' type='text' placeholder='Mail' class='form-control input-md'></td><td><select class='form-control' name='slct"+i+"' placeholder='Select'><option value='1'>1</option><option value='2'>2</option></select></td>"); 
 

 
     $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>'); 
 
     i++; 
 
    }); 
 
    $("#delete_row").click(function(){ 
 
    \t if(i>1){ 
 
\t \t $("#addr"+(i-1)).html(''); 
 
\t \t i--; 
 
\t \t } 
 
\t }); 
 

 
}); 
 

 
$('.buttonx').click(function() { 
 
    var total = 0; 
 

 
    $('#tab_logic tbody tr').each(function(index) { 
 

 
     var price = parseInt($(this).find('.optx sltx option value').text()); 
 
     var quantity = parseInt($(this).find('.optx sltx option').val()); 
 
     var value = $(this).find('.value'); 
 
     var subTotal = price * quantity; 
 

 
     value.text(subTotal); 
 
     value.text(price); 
 
     total = total + subTotal; 
 
     testotal = price; 
 

 
    }); 
 

 
    $('.totality').text('Total : '+testotal); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<div class="container"> 
 
    <div class="row clearfix"> 
 
\t \t <div class="col-md-12 column"> 
 
\t \t \t <table class="table table-bordered table-hover" id="tab_logic"> 
 
\t \t \t \t <thead> 
 
\t \t \t \t \t <tr > 
 
\t \t \t \t \t \t <th class="text-center"> 
 
\t \t \t \t \t \t \t # 
 
\t \t \t \t \t \t </th> 
 
\t \t \t \t \t \t <th class="text-center"> 
 
\t \t \t \t \t \t \t Value1 
 
\t \t \t \t \t \t </th> 
 
\t \t \t \t \t \t <th class="text-center"> 
 
\t \t \t \t \t \t \t Value2 
 
\t \t \t \t \t \t </th> 
 
\t \t \t \t \t \t <th class="text-center"> 
 
\t \t \t \t \t \t \t Select 
 
\t \t \t \t \t \t </th> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t </thead> 
 
\t \t \t \t <tbody> 
 
\t \t \t \t \t <tr id='addr0'> 
 
\t \t \t \t \t \t <td> 
 
\t \t \t \t \t \t 1 
 
\t \t \t \t \t \t </td> 
 
\t \t \t \t \t \t <td> 
 
\t \t \t \t \t \t <input type="text" name='va10' placeholder='Val1' class="form-control"/> 
 
\t \t \t \t \t \t </td> 
 
\t \t \t \t \t \t <td> 
 
\t \t \t \t \t \t <input type="text" name='va20' placeholder='Val2' class="form-control"/> 
 
\t \t \t \t \t \t </td> 
 
\t \t \t \t \t \t <td class="optx"> 
 
\t \t \t \t \t \t <select class="form-control sltx" name="slct0" placeholder="Select"><option value="1">1</option><option value="2">2</option></select> 
 
\t \t \t \t \t \t </td> 
 
\t \t \t \t \t </tr> 
 
        <tr id='addr1'></tr> 
 
\t \t \t \t </tbody> 
 
       <tfoot> 
 
        <tr> 
 
         <th></th> 
 
         <th></th> 
 
         <th><a id="buttonx" class="btn btn-default btn-danger pull-right">Calculate</a></th> 
 
         <th id="totality" style="vertical-align: middle;">Total : </th> 
 
        </tr> 
 
       </tfoot> 
 
\t \t \t </table> 
 
\t \t </div> 
 
\t </div> 
 
\t <a id="add_row" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete Row</a> 
 
</div>

我试图创建从总表,但我不能从表JS装载值,也许我从其他答案中得到的脚本错了。参考是在这里:getting values from a html table via javascript/jquery and doing a calculation

我想问,我怎么能从选择选项的计算,或者从输入文本框,没有我按下按钮(实时计算)。

由于之前。

+0

总公式是什么?它是'value1 + value2 + select value'? – kasperite

+0

'value1' | 'value2' | 'value1 + value2 + select' –

回答

0

好,按我的理解能力,你需要实时计算,其计算值作为用户进入和离开的任何文本框或更改选择,而无需使用计算按钮。

在代码中有一些错误,我已经构建并改变你的一些功能来实现实时计算。计算公式是不同的,因为我无法理解你将如何计算。我正在使用元素的类选择器来实现它,并使用此值获取值。

这里是更新的代码被同时使用,在点击按钮,并实时计算。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

<div class="container"> 
    <div class="row clearfix"> 
     <div class="col-md-12 column"> 
      <table class="table table-bordered table-hover" id="tab_logic"> 
       <thead> 
        <tr > 
         <th class="text-center"> 
          # 
         </th> 
         <th class="text-center"> 
          Value1 
         </th> 
         <th class="text-center"> 
          Value2 
         </th> 
         <th class="text-center"> 
          Select 
         </th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr id='addr0'> 
         <td> 
         1 
         </td> 
         <td> 
         <input type="text" name='va10' placeholder='Val1' class="form-control va10"/> 
         </td> 
         <td> 
         <input type="text" name='va20' placeholder='Val2' class="form-control va20"/> 
         </td> 
         <td class="optx"> 
         <select class="form-control sltx slct0" name="slct0" placeholder="Select"><option value="1">1</option><option value="2">2</option></select> 
         </td> 
        </tr> 

       </tbody> 
       <tfoot> 
        <tr> 
         <th></th> 
         <th></th> 
         <th><a id="buttonx" class="btn btn-default btn-danger pull-right">Calculate</a></th> 
         <th id="totality" style="vertical-align: middle;">Total : </th> 
        </tr> 
       </tfoot> 
      </table> 
     </div> 
    </div> 
    <a id="add_row" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete Row</a> 
</div> 

<script type="text/javascript"> 
    $(document).ready(function(){ 
     var i=1; 
    $("#add_row").click(function(){ 
     $('#tab_logic').append("<tr id='addr"+i+"'><td>"+ (i+1) +"</td><td><input name='name'"+i+" type='text' class='form-control va10' placeholder='Name' class='form-control input-md' /> </td><td><input name='mail'"+i+"' type='text' placeholder='Mail' class='va20 form-control input-md'></td><td><select class='form-control slct0' name='slct'"+i+" placeholder='Select'><option value='1'>1</option><option value='2'>2</option></select></td></tr"); 


     i++; 
    }); 
    $("#delete_row").click(function(){ 
     if(i>1){ 
     $("#addr"+(i-1)).html(''); 
     i--; 
     } 
    }); 

}); 

function calculator(){ 
var total = 0; 

    $('#tab_logic tbody tr').each(function(index) { 

     var val1 = $(this).find('.va10').val().length==0?0:parseInt($(this).find('.va10').val()); 
     var val2 = $(this).find('.va20').val().length==0?0:parseInt($(this).find('.va20').val()); 
     var select = $(this).find('.slct0').val().length==0?0:parseInt($(this).find('.slct0').val()); 
     var subTotal = (val1 + val2)*select; 
     total+=subTotal;  

    });  
    $('#totality').text(total); 
} 
$('#tab_logic').on('blur change','.va10,.va20,.slct0',function(){ 
calculator() 
}) 
$('#buttonx').click(function() { 
    calculator(); 
}); 


</script>