如何添加具有相同类名的表单输入字段
How to add input field of a form with same class name
我有一个JavaScript问题,我仍然可以找到一个出路。
我有一个动态形成的表,它包含表单字段。
代码: var table = document.getElementById("table");
var row = table.insertRow(-1);
var cell1 = row.insertCell(-1);
var cell2 = row.insertCell(-1);
var cell3 = row.insertCell(-1);
var cell4 = row.insertCell(-1);
var cell5 = row.insertCell(-1);
cell1.innerHTML = count; //this is index, set above as var count = 1;
cell2.innerHTML = name; //this is a variale dynamically generated
cell3.innerHTML = '<input type="text" name="quantity[]" onchange="addAll()" class="quantity" id="quantity" value="1" data-price="'+price+'" />'
cell4.innerHTML = price;
cell5.innerHTML = '<a href="#" onclick="deleteRow('+count+')">Delete</a>';
上面的代码会输出如下:
<input type="text" name="quantity[]" onchange="addAll()" class="quantity" value="1" data-price="4" />
<input type="text" name="quantity[]" onchange="addAll()" class="quantity" value="34" data-price="5" />
<input type="text" name="quantity[]" onchange="addAll()" class="quantity" value="12" data-price="8" />
然后我有另一个输入字段,标签TOTAL
<input name="total" id="total" />
我想在每次onchange()之后循环遍历上面的输入表单并进行计算。
var total = class with quantity[0] * data-price + class with quantity[1] * data-price //and so on for all the input (multiply the input value by the data-price attribute and add all together).
所以我可以把它放在函数中:
function addAll() {
//code that returns the total
document.GetElementById('total').value = total;
}
我在看jQuery $("className")。每个(function())都混淆了
如果你想访问每个类,下面的jquery可以做到:
var total=0;
$(".quantity").each(function() {
total=total+$(this).val();
});
"。"表示"选择类",就像css一样。你不能对id做同样的事情,因为id是唯一的,所以jquery将只返回第一个元素。
您可以使用下面的代码来遍历您的字段:
$('。量")。每个(函数(){//你的计算});
function addAll()
{
var total = 0;
$('.quantity).each(function()
{
if($(this).attr('name')!='Total')
{
var val = $(this).attr('value')
var dat = $(this).attr('data-price')
total = total + (val*dat)
}
});
document.GetElementById('total').value = total
}
我相信这会达到你的要求…虽然它不附属于.on('change')
事件。你可能想要自己改变一下这部分。祝你学习jQuery顺利。
使用jQuery .each()
!
var value = 0, price = 0;
$('.quantity').each(function () {
var val = value += Number($(this).val()),
data = price += $(this).data('price'),
total = val * data;
$('#total').val(total);
});
JSFiddle示例-你可能想看一下…
我认为这是完美的代码为您的要求
$('.quantity').change(function(){
var total = 0;
$('.quantity').each(function(index,element){
total += ( $(element).val())*($(element).prop('data-price'));
});
$('#total').val(total);
});
相关文章:
- 可以't让我的if语句处理js中的html表单输入
- 如何使用WCF服务和javascript表单post上传.doc文件
- Javascript生成的表单未提交
- 如何使用javascript或html下载PDF格式的填写表单
- HTML表单提交时未执行外部函数
- 如何将输入(type=text)从html表单传递到javascript函数
- 通过单击表单中的按钮,在代码生成中使用javascript生成字母数字代码
- Ajax发布表单序列化,发布引号'
- 多级HTML表单
- 后焦点更改为IE 11中的地址栏,而不是转移到表单中的下一个控件
- 在验证和发送邮件后更改联系人表单的 html
- jQuery表单添加不适用于下拉列表
- Rails/JSON:如何将JSON用于jquery UI自动完成表单
- 如何从pdftron webviewer获取表单数据
- JS验证ajax返回的html中的表单数据
- 使用 jQuery 获取提交的表单值,具有多个具有相同类名的表单
- 将具有相同类名的表单输入字段放入数组中
- 在下面的场景中,如何在AJAX函数调用中禁用和启用表单上存在的所有具有相同类的按钮
- 如何添加具有相同类名的表单输入字段
- 使用jquery validate验证具有相同类的多个表单