Напишите функцию, которая использовала клонированные входы

Question

Напишите функцию, которая использовала клонированные входы

0

У меня здесь небольшая проблема.

У меня есть форма, где я хотел бы, чтобы пользователь мог добавлять строки в форму, нажав кнопку.

Я могу клонировать строку и изменять идентификатор для каждого из них, но теперь я хочу иметь возможность использовать эти новые входы в функции, но я не знаю, как это сделать. Вот что у меня есть.

Я хочу, чтобы пользователь вводил значения для каждого из полей, а затем при вводе всех чисел для каждой строки число, которое я хочу, чтобы общее поле в каждой строке отображало (acwatts * hours) * количество.

Как написать функцию, которая будет использовать новые поля, даже если они еще не созданы?

Вот 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>

Brian McCall 04 окт. 2013, в 04:25

Источник

Теги:

jquery

dynamic

function

1 ответ

Ещё вопросы

Arun P Johny · Answer 1 · 2013-10-04T00-33-00.000Z

Проблемы

Идентификатор элемента должен быть уникальным... в вашем случае все клонированные элементы имеют поля ввода с одинаковым идентификатором. Поэтому в этом случае поля ввода не должны иметь атрибут 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
}

Демо: скрипка

Но я думаю, что будет лучше использовать делегацию событий для решения этой проблемы, например

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

});

Демо: скрипка