Javascript 动态添加html字段，然后将选择值相乘，相加总数

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

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

例如（q和s是选择值）

但这是动态的，所以可能有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>

1.
2.
3.
4.
5.
6.

//剧本

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

$（函数（）{
var addDiv=$（“#addinput”）；
变量i=$（'#addinput'）.size（）+1；
$（'#addNew'）.live（'单击'，函数（））{
$（'123456
'）。附录（addDiv）；
i++；
返回false；
});
$（'#remNew'）.live（'单击'，函数（））{
如果（i>2）{
$（this.parents（'span'）.remove（）；
我--；
}
返回false；
});
});
变量x，y，z；
x=document.getElementById（“q_new_1”），
xvalue=x.value；
y=document.getElementById（“s_new_1”），
y值=y值；
z=xvalue*yvalue；
文件。编写（z）；

---

首先，我将按如下方式构造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>

这是

1.
2.
3.
1.
2.
3.
1.
2.
3.
-
总数：

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);
        });
    });
});

var总计=0.0；
$（函数（）{
var addDiv=$（“#addinput”）；
变量i=$（'#addinput'）.size（）+1；
$（'#addNew'）.live（'单击'，函数（））{
$（'#addinput'）。追加（'123'）；
i++；
返回false；
});
$（'#remNew'）.live（'单击'，函数（））{
如果（i>2）{
$（this.parents（'span'）.remove（）；
我--；
}
返回false；
});
$（“#getTotal”）。单击（函数（）{
$（“.inputs”）.each（函数（）{
textValue=parseFloat（$（this.find）（“input”）.val（））；
selectValue=parseFloat（$（this.find（“select”）.val（））；
合计+=文本值*选择值；
$（“#总计”）.html（总计）；
});
});
});

感谢Josh在这方面花时间，但我需要输入在我拥有的结构中，textfield-select-textfield-select。然后将选择的字段相乘。我的版本在一定程度上有效。选择字段相乘，可以创建一组新的输入。但我需要新的集合能够相乘，然后将它们全部相加。此外，我无法让您轻松工作，输出为“NaN”，并且“添加”按钮没有添加新字段。我还通过复制您的代码在本地进行了尝试。

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

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

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);
        });
    });
});