Question

我在这里遇到一些问题。

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

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

我希望用户输入每个字段的值，然后输入每行的所有数字，我希望每行显示一个总数（acwatts *小时）*数量。

如何编写将使用新字段的函数，即使它们尚未创建？

这是我的克隆功能的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>

Answer 1

问题

元素的ID必须是唯一的...在您的情况下，所有克隆元素都具有相同ID的输入字段。因此，在这种情况下，输入字段不需要具有ID属性
您的HTML无效，tr无法将form作为孩子

尝试

<input type="number" name="hours" id="hours" value="" size="5" onkeyup="Calc(this);" />

和

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
}

演示：Fiddle

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

$('#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

});

演示：Fiddle

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

1 个答案: