【问题标题】:calculate select option value on table with jquery用jquery计算表上的选择选项值
【发布时间】:2017-01-04 21:01:47
【问题描述】:

我认为我遇到了 js 和 html(引导程序)的问题, 我从 bootsnip 获得了这些 sn-p 并尝试根据我的工作需要对其进行修改。 但在第三行,抱歉错字或英文不好。

这里的 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(){
    	 if(i>1){
		 $("#addr"+(i-1)).html('');
		 i--;
		 }
	 });

});

$('.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">
		<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"/>
						</td>
						<td>
						<input type="text" name='va20' placeholder='Val2' class="form-control"/>
						</td>
						<td class="optx">
						<select class="form-control sltx" name="slct0" placeholder="Select"><option value="1">1</option><option value="2">2</option></select>
						</td>
					</tr>
                    <tr id='addr1'></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>

我正在尝试从表中创建总数,但我无法使用 js 从表中加载值,也许我从堆栈上的其他答案中得到的脚本出错了。参考在这里:getting values from a html table via javascript/jquery and doing a calculation

我想问一下,我怎样才能从表格上的选择选项中获得计算,或者从输入文本框中获得计算,而无需按下按钮(实时计算)。

之前谢谢。

【问题讨论】:

  • 总公式是什么?是value1 + value2 + select value吗?
  • value1 | value2 | value1 + value2 + select

标签: javascript jquery html twitter-bootstrap each


【解决方案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>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2023-03-17
    • 2021-04-25
    • 1970-01-01
    • 2011-09-24
    • 2016-07-18
    • 1970-01-01
    • 2014-03-18
    • 1970-01-01
    相关资源
    最近更新 更多