javascript - 动态添加 html 字段，然后将选择的值相乘并相加总计

Question

我有一个简单的表单，由两个文本字段和两个选择字段组成，允许用户动态添加另一组输入。
将两个选择字段相乘并显示结果。

我需要的是能够根据需要添加尽可能多的行，并将每行的选择值相乘，然后将总数相加。

E.G. (q和s是选择值)

q1 * s1 = z1  
q2 * s2 = z2  
q3 * s3 = z3  
total = z1+z2+z3

但是这是动态的，因此可能有 100 个值，也可能有 2 个。

这是到目前为止我的代码；

<form>
  <div id="addinput"> <span>
    <input type="text" id="p_new_1" size="20" name="p_new_1" value="" />
    <select id="q_new_1" name="q_new_1">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <input type="text" id="r_new_1" size="20" name="p_new_1" value="" />
    <select id="s_new_1" name="s_new_1">
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
    </select>
    <a href="#" id="addNew">Add</a> <br />
    </span> </div>
</form>

//脚本

<script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">    </script>
<script type="text/javascript">
$(function() {
    var addDiv = $('#addinput');
    var i = $('#addinput').size() + 1;
    $('#addNew').live('click', function() {
        $('<span><input type="text" id="p_new_' + i +'" size="20" name="p_new_' + i +'"     value="" /><select id="q_new_' + i +'" name="q_new' + i +'"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><input type="text" id="r_new_' + i +'" size="20" name="r_new_' + i +'" value="" /><select id="s_new_' + i +'" name="s_new' + i +'"><option value="4">4</option><option value="5">5</option><option value="6">6</option></select><a href="#" id="remNew">Remove</a><br /></span>').appendTo(addDiv);
        i++;
        return false;
    });
    $('#remNew').live('click', function() {
        if( i > 2 ) {
        $(this).parents('span').remove();
        i--;
        }
        return false;
    });
});
var x, y, z;
x = document.getElementById("q_new_1"),
xvalue = x.value;
y = document.getElementById("s_new_1"),
yvalue = y.value;
z = xvalue * yvalue;
document.write (z);

Answer 1

我将首先构建 HTML 行，如下所示:

<div class="inputs">
    <input type="text" name="p_new_3" size="20" value="" />
    <select name="q_new_3">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option></select>
</div>

然后您可以循环点击事件中的行并总结其子项的值，如下所示:

$("#getTotal").click(function() {
    $(".inputs").each(function() {
       textValue = parseFloat($(this).find("input").val());
       selectValue = parseFloat($(this).find("select").val());
       total += textValue * selectValue;
        $("#total").html(total);
    });
});

这里是a working jsfiddle demo .

<form>
    <div id="addinput">

<div class="inputs">
    <input type="text" name="p_new_1" size="20" value="" />
    <select name="q_new_1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option></select>
</div>

<div class="inputs">
    <input type="text" name="p_new_2" size="20" value="" />
    <select name="q_new_2">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option></select>
</div>

<div class="inputs">
    <input type="text" name="p_new_3" size="20" value="" />
    <select name="q_new_3">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option></select>
</div>

<a href="#" id="addValues">Add</a> -
<a href="#" id="getTotal">Get total</a>

Total: <span id="total"></span>
<br />

</div>
</form>

Javascript:

var total = 0.0;

$(function() {
    var addDiv = $('#addinput');
    var i = $('#addinput').size() + 1;
    $('#addNew').live('click', function() {
         $('#addinput').append('<div class="inputs"><input type="text" name="p_new_' + i + '" size="20" value=""><select name="q_new_' + i + '"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select></div>');
         i++;
     return false;
    });

    $('#remNew').live('click', function() {
         if( i > 2 ) {
             $(this).parents('span').remove();
             i--;
         }
         return false;
    });

    $("#getTotal").click(function() {
        $(".inputs").each(function() {
           textValue = parseFloat($(this).find("input").val());
           selectValue = parseFloat($(this).find("select").val());
           total += textValue * selectValue;
            $("#total").html(total);
        });
    });
});