Jquery 编写一个使用克隆输入的函数_Jquery_Function_Dynamic

Jquery 编写一个使用克隆输入的函数

jquery function dynamic

Jquery 编写一个使用克隆输入的函数,jquery,function,dynamic,Jquery,Function,Dynamic,我这里有点小问题我有一个表单，我希望用户能够通过单击按钮向表单中添加行我可以克隆行并更改每个行的id，但现在我希望能够在函数中使用这些新输入，但我不知道如何使用。这是我的我希望用户为每个字段输入值，然后在输入每行的所有数字时，我希望每行的合计框显示一个数字（ACW*小时）*数量我如何编写一个函数来使用新字段，即使它们尚未创建下面是我的克隆函数的jquery var count = 1; $(document).ready(function() { $("#add").clic

我这里有点小问题

我有一个表单，我希望用户能够通过单击按钮向表单中添加行

我可以克隆行并更改每个行的id，但现在我希望能够在函数中使用这些新输入，但我不知道如何使用。这是我的

我希望用户为每个字段输入值，然后在输入每行的所有数字时，我希望每行的合计框显示一个数字（ACW*小时）*数量

我如何编写一个函数来使用新字段，即使它们尚未创建

下面是我的克隆函数的jquery

var count = 1;
$(document).ready(function() {
    $("#add").click(function() {

     var clone = $('#applianceTable tbody>tr:nth-child(2)').clone(true);
         clone.find(":input").val("");  
         clone.find(':input').attr('id', function(i, val) {
         return val + count;
    });

        clone.insertBefore('#addCalc');
        count++;

    });
});

下面是我试图编写的函数的javascript，但我很乐意将其更改为jquery

function Calc()
{
//lets get the entered numbers
var acwatts_holder=parseInt(document.getElementById('acwatts').value);
var quantity_holder=parseInt(document.getElementById('quantity').value);
var hours_holder=parseInt(document.getElementById('hours').value);
//ok lets do our calculations
var total=(acwatts_holder*hours_holder)*quantity_holder;
//now printing the result back on forms
document.load_calc.total1.value=total;
}

以下是HTML：

</head>
<body>
<table width="100%" border="0" cellspacing="1" cellpadding="8" bgcolor="#083972"    id="applianceTable">
<thead bgcolor="#083972">
<td colspan="6" bgcolor="#083972" align="center"><span class="title3">Load Evaluation Calculator</span></td>
</thead>
<tbody>
<tr bgcolor="#e4e4e4" align="center">
<th width="30%">Appliance</th>
<th width="10%">Quantity</th>
<th width="15%">AC Watts</th>
<th width="15%">DC Watts</th>
<th width="15%">Hours per Day</th>
<th width="15%">Total Watt hours per Day</th>
</tr>
<tr bgcolor="#e4e4e4" align="center" class="row_to_clone"> 
<form name="load_calc" >
<td width="30%"><input type "number" name="appliance" id="appliance" size="50"  /></td>
<td width="10%"><input type="number" name="quantity" id="quantity" size="5" value="" />     </td>
<td width="15%"><input type="number" name="acwatts" id="acwatts" value=""size="15" /></td>
<td width="15%"><input type="number" name="dcwatts" id="dcwatts" value="" size="15" /> </td>
<td width="15%"><input type="number" name="hours" id="hours" value="" size="5" onkeyup="Calc();" /></td>
<td width="15%"><input type="text" name="total" id="total" disabled="disabled"></td>
</form>
</tr>
<tr id="addCalc">
<td width="10%" ><input type="button" id="add" value="Add Another Appliance"></td> 
<td colspan="6" align="right"> <input type="button" name="calculating" value="CALCULATE" onclick="CalcTotal();"></td>
</tr>
<tr>
<td colspan="6" align="right" bgcolor="#083972"><p style="color:#ffffff;">Your System Should be at least<input type="text" name="totalSystem" readonly="readonly">kWh</p></td>
</tr>
</tbody>
</table>
</body>
</html>


负荷评估计算器
器具
量
交流瓦特
直流瓦特
每天工作小时数
每天总瓦时
您的系统应至少为TkWh

问题

元素的Id必须是唯一的。。。在您的例子中，所有克隆的元素都具有相同id的输入字段。因此，在本例中，输入字段不需要具有id属性

您的html无效，

tr

不能将

form

作为子项

试一试

演示：

但我认为最好使用事件委托来解决这个问题，就像

$('#applianceTable').on('keyup change', 'input[name="acwatts"], input[name="quantity"], input[name="hours"]', function () {
    var $tr = $(this).closest('tr');
    var acwatts_holder = parseInt($tr.find('input[name="acwatts"]').val()) || 0;
    var quantity_holder = parseInt($tr.find('input[name="quantity"]').val()) || 0;
    var hours_holder = parseInt($tr.find('input[name="hours"]').val()) || 0;
    //ok lets do our calculations
    var total = (acwatts_holder * hours_holder) * quantity_holder;
    //now printing the result back on forms
    $tr.find('input[name="total"]').val(total)
    //lets get the entered numbers

});

演示：

function Calc(el) {
    var $tr = $(el).closest('tr');
    var acwatts_holder = parseInt($tr.find('input[name="acwatts"]').val()) || 0;
    var quantity_holder = parseInt($tr.find('input[name="quantity"]').val()) || 0;
    var hours_holder = parseInt($tr.find('input[name="hours"]').val()) || 0;
    //ok lets do our calculations
    var total = (acwatts_holder * hours_holder) * quantity_holder;
    //now printing the result back on forms
    $tr.find('input[name="total"]').val(total)
console.log($tr, $tr.find('input[name="total"]'))
    //lets get the entered numbers
}

$('#applianceTable').on('keyup change', 'input[name="acwatts"], input[name="quantity"], input[name="hours"]', function () {
    var $tr = $(this).closest('tr');
    var acwatts_holder = parseInt($tr.find('input[name="acwatts"]').val()) || 0;
    var quantity_holder = parseInt($tr.find('input[name="quantity"]').val()) || 0;
    var hours_holder = parseInt($tr.find('input[name="hours"]').val()) || 0;
    //ok lets do our calculations
    var total = (acwatts_holder * hours_holder) * quantity_holder;
    //now printing the result back on forms
    $tr.find('input[name="total"]').val(total)
    //lets get the entered numbers

});