Question

我正在尝试计算所选值的总值。在一行中，我有三个选项，一个是选择仅一个房间，第二个是选择任何一个选项，与第三列相同。当我选择选项时，它会显示正确的“总计”。同样在单击添加房间时，将出现具有相同选项的新行，并且添加行没有限制。但是，现在我要尝试的是，当某人从不同的行中选择值时，“总计”必须显示所选的总值。

假设我选择了1个房间，第一个值是5000，第二个值是4000，那么“ Total Amount”显示为9000。当我再添加一行时，再次选择1个房间，则第一个值是6000并且第二个值是9000。现在“总金额”将显示24000，这将在添加行和选择值时持续工作。

这是我的HTML：

<table style="width: 100%;">
    <tr style=" color: white;">
        <th class="col-md-4 text-center" style="padding: 10px;">No. of Rooms : </th>
        <th class="col-md-4 text-center" style="padding: 10px;">Adult's : </th>
        <th class="col-md-4 text-center" style="padding: 10px;">Extra : </th>
    </tr>
</table>                        

<table id="dataTable" style="width: 100%;">
    <tr>
        <td >
            <select name="links" class="form-control person-3" action="post" id="myselect" onChange="document.getElementById('rooms').innerHTML = this.value;">
                <option value="0" selected="selected">--select--</option>
                <option value="1">1</option>
            </select>
        </td>
        <td >
            <select name="keywords" class="form-control person-1" action="post" id="myselect" onChange="document.getElementById('adults').innerHTML = this.value;">
                <option value="0" selected="selected">--select--</option>
                <option value="5000">1</option>
                <option value="8000">2</option>
            </select>
        </td>
        <td >
            <select name="violationtype" class="form-control person-2" action="post" id="myselect" onChange="document.getElementById('extra').innerHTML = this.value;">
                <option value="0" selected="selected">No Beds</option>
                <option value="4000">Adult</option>
                <option value="3000">Child below 12</option>
                <option value="2000">Child below 7</option>
            </select>
        </td>

    </tr>
</table> 

<input type="button" value="Add Rooms" onclick="addRow('dataTable')" class="btn btn-primary" style="margin-top: 15px;" /><br><br>



    <div class="row">
        <div class="col-md-6" style="color: white;font-size: 20px;text-align: right;">Total Amount :</div>
        <div class="col-md-6" style="color: white;font-size: 20px;text-align: left;"> 
            <span class="addition"></span>
        </div>
    </div><br>

这是我用来计算总金额的脚本：

var add_1 =0;
var add_2 = 0; 
var mul_3 = 0;

function displayValues() {
  add_1 = parseInt($('.person-1').val());
  add_2 = parseInt($('.person-2').val());
  mul_3 = parseInt($('.person-3').val());

  $(".addition-1").text(add_1);
  $(".addition-2").text(add_2);
  $(".multiplication_3").text(mul_3);

  $(".addition").text( mul_3 *( add_1 + add_2) );


}

$(document).ready(function(){
    $(".person-1").change(displayValues); 
    $(".person-2").change(displayValues);
    $(".person-3").change(displayValues);
});

以下是添加房间的代码：

function addRow(tableID) {

  var table = document.getElementById(tableID);

  var rowCount = table.rows.length;
  var row = table.insertRow(rowCount);

  var colCount = table.rows[0].cells.length;

  for (var i = 0; i < colCount; i++) {

    var newcell = row.insertCell(i);

    newcell.innerHTML = table.rows[0].cells[i].innerHTML;
    //alert(newcell.childNodes);
    switch (newcell.childNodes[0].type) {
      case "text":
        newcell.childNodes[0].value = "";
        break;
      case "checkbox":
        newcell.childNodes[0].checked = false;
        break;
      case "select-one":
        newcell.childNodes[0].selectedIndex = 0;
        break;
    }
  }
}

Answer 1

代码不完整.............并且存在很多错误..

尝试使其生效。但是addRow（'dataTable'）;定义缺失。

`https://jsfiddle.net/asimshahiddIT/756tb80f/6/`

Answer 2

这有帮助吗？

$(document).ready(function(){
    var dd1 =0;
    var dd2 =0;
    var dd3 =0;
    var totalBillAmt = 0;
  
  $("#myselect1").change(function(){    dd1 = Number($(this).val());  updateTotalPrice();  });
  $("#myselect2").change(function(){    dd2 = Number($(this).val());  updateTotalPrice();  });
  $("#myselect3").change(function(){    dd3 = Number($(this).val());  updateTotalPrice();  });


  updateTotalPrice = function (){
    totalBillAmt = dd1 + dd2 + dd3;
    $("#totalPrice").text("total amount is:" + totalBillAmt);
  };
  

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width: 100%;">
                    <tr style=" color: white;">
                        <th class="col-md-4 text-center" style="padding: 10px;">No. of Rooms : </th>
                        <th class="col-md-4 text-center" style="padding: 10px;">Adult's : </th>
                        <th class="col-md-4 text-center" style="padding: 10px;">Extra : </th>
                    </tr>
                </table>                        

                <table id="dataTable" style="width: 100%;">
                    <tr>
                        <td >
                            <select name="links" class="form-control person-3" action="post" id="myselect1" >
                                <option value="0" >--select--</option>
                                <option value="100">test option 1</option>
                                <option value="500">test option 2</option>
                            </select>
                        </td>
                        <td >
                            <select name="keywords" class="form-control person-1" action="post" id="myselect2" >
                                <option value="0" >--select--</option>
                                <option value="5000">another opt 1</option>
                                <option value="8000">another opt 2</option>
                            </select>
                        </td>
                        <td >
                            <select name="violationtype" class="form-control person-2" action="post" id="myselect3" >
                                <option value="0" >No Beds</option>
                                <option value="4000">Adult</option>
                                <option value="3000">Child below 12</option>
                                <option value="2000">Child below 7</option>
                            </select>
                        </td>

                    </tr>
                </table> 

                <input type="button" value="Add Rooms" onclick="updateTotalPrice()" class="btn btn-primary" style="margin-top: 15px;" /><br><br>
<div id='totalPrice'></div>


                    <div class="row">
                        <div class="col-md-6" style="color: white;font-size: 20px;text-align: right;">Total Amount :</div>
                        <div class="col-md-6" style="color: white;font-size: 20px;text-align: left;"> 
                            <span class="addition"></span>
                        </div>
                    </div><br>

Answer 3

似乎所有选择标签都具有相同的ID“ myselect ”。请给他们提供唯一的ID，否则他们会行为不检。然后，如果您从类名中获取值，那么在添加更多具有相同类名的行时会发生什么情况。您的逻辑将不起作用。请尝试获取提供给每行选择标签的动态ID的值。

Answer 4

ID2

请检查上面的链接

这是您期望的输出

根据不同的下拉菜单选择值计算总金额

4 个答案: