0

我在这里遇到了一个小问题。

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

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

我希望用户为每个字段输入值，然后在输入每行的所有数字后，我希望每行中的总框显示（acwatts*hours）*quantity。

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

这是我的克隆函数的 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>
4

1 回答 1

0

问题

  1. 元素的 ID 必须是唯一的......在您的情况下，所有克隆的元素都具有具有相同 ID 的输入字段。所以在这种情况下，输入字段不需要有 ID 属性
  2. 您的 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
}

演示：小提琴

但我认为使用事件委托来解决这个问题会更好

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

});

演示：小提琴

于 2013-10-04T02:21:06.960 回答