вычислить значение опции выбора на таблице с jquery

Question

Я думаю, что у меня возникли проблемы с js и html (bootstrap), Я получил этот фрагмент из bootsnip и попытался изменить его для моей работы. , но на третьих линиях, извините за опечатку или плохо используя английский.

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

Я хочу спросить, как я могу получить расчет из опции выбора на столе, в качестве альтернативы из текстового поля ввода и без нажатия кнопки (расчет в реальном времени).

Спасибо прежде.

Answer 1

Ну, в соответствии с моей способностью понимать, вам нужен калькулятор в реальном времени, который вычисляет значение как пользователь, вводящий и оставляющий любое текстовое поле или изменяющее выбор без использования кнопки расчета.

В вашем коде есть некоторая ошибка, я создал и изменил некоторые функции, чтобы реализовать калькулятор реального времени. формула расчета отличается от того, что я не могу понять, как вы собираетесь рассчитывать. Я реализую его с помощью селектора классов элемента и получения значения с использованием этого.

Вот обновленный код, который использует как кнопки клика, так и калькулятор в режиме реального времени.

<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>