javascript - 如何在 Javascript 中获取动态 id 的值?
问题描述
由于我是 javascript 新手,我正在努力获取动态生成的 id 的输入值。
var i = 0;
function addRow() {
var div = document.createElement('div');
div.className = 'rTableRow';
div.id = 'Taxrow' + i;
div.innerHTML =
'<div class="rTableCell"><input type="text" name="product'+i+'" id="product'+i+'" placeholder="Product Name"></div>\
<div class="rTableCell"><input type="text" name="price'+i+'" id="price'+i+'" placeholder="Item Price"></div>\
<div class="rTableCell"><input type="text" name="qty'+i+'" id="qty'+i+'" onchange="subTotal();" placeholder="Item Quantity"></div>\
<div class="rTableCell"><input type="text" name="tax'+i+'" id="tax'+i+'" onkeyup="Total();" placeholder="Tax Percentage"></div>\
<div class="rTableCell"><input name="subtotal'+i+'" type="text" id="subtotal'+i+'" size="10" disabled></div>\
<div class="rTableCell"><input name="salestax'+i+'" type="text" id="salestax'+i+'" size="10" disabled></div>\
<div class="rTableCell"><input name="gtotal'+i+'" type="text" id="gtotal'+i+'" size="10" disabled></div>\
<input type="button" value="-" onclick="removeRow(this)">';
document.getElementById('dyncalc').appendChild(div);
i=i+1;
}
function removeRow(input) {
document.getElementById('dyncalc').removeChild(input.parentNode);
}
/*
function setValue(node){
var price = document.getElementById(node.value).value;
//alert(price);
}
*/
function subTotal() {
/* var price = document.getElementById('price[i]').value;
var qty = document.getElementById('qty[i]').value;*/
var price = document.TaxCalculator.price.value;
var qty = document.TaxCalculator.qty.value;
var productPrice = price * qty;
document.TaxCalculator.subtotal.value = productPrice.toFixed(2);
return productPrice;
}
function Total() {
var subtotal = subTotal();
var stax = (document.TaxCalculator.tax.value) / 100 ;
tax = subtotal * stax ;
document.TaxCalculator.subtotal.value = subtotal.toFixed(2);
document.TaxCalculator.salestax.value = tax.toFixed(2);
var gtotal = subtotal + tax;
document.TaxCalculator.gtotal.value = gtotal.toFixed(2);
}
.taxCalculator h3{
text-align: center;
text-transform: uppercase;
padding: 10px;
color: #ffffff;
}
.rTable { display: table; }
.rTableRow { display: table-row; }
.rTableHeading { display: table-header-group; }
.rTableBody { display: table-row-group; }
.rTableFoot { display: table-footer-group; }
.rTableCell, .rTableHead { display: table-cell; }
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Tax Calculator</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>
<body>
<div class="taxCalculator">
<div class="container">
<p></p>
<div class="card">
<h3 style="text-align: center;" class="card-header bg-info">Tax Caluculator </h3>
<p></p>
<div class="form-group d-flex justify-content-center">
<form action="" name="TaxCalculator" id="TaxCalculator" class="form-inline">
<div class="rTable" id="dyncalc">
<div class="rTableRow">
<div class="rTableHead"><input type="button" class="btn btn-info" value="AddItems" onclick="addRow()"></div>
</div>
<div class="rTableRow">
<div class="rTableHead"><label for="product" >Product Name</label></div>
<div class="rTableHead"><label for="price" >Price</label></div>
<div class="rTableHead"><label for="qty" >Item Qty</label></div>
<div class="rTableHead"><label for="tax" >Tax Percentage (%) </label></div>
<div class="rTableHead"><label for="subtotal" >Sub Total: </label></div>
<div class="rTableHead"><label for="salestax" >Tax :</label></div>
<div class="rTableHead"><label for="gtotal" >Grand Total: </label></div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
我想获取Taxrow[i]
id 的输入值。我累了onchange
,var price = document.TaxCalculator.price[i].value;
我知道,我做错了什么。我也document.getElementById(node.value).value
使用onchange(getValue.this)
了帮助我来实现这一点。
解决方案
您可以制作函数Total
并Subtotal
具有参数:Total(i)
。然后生成html来调用这样的函数:
div.innerHTML =
'<div class="rTableCell"><input type="text" name="product'+i+'" id="product'+i+'" placeholder="Product Name"></div>\
<div class="rTableCell"><input type="text" name="price'+i+'" id="price'+i+'" placeholder="Item Price"></div>\
<div class="rTableCell"><input type="text" name="qty'+i+'" id="qty'+i+'" onchange="subTotal('+ i +');" placeholder="Item Quantity"></div>\
<div class="rTableCell"><input type="text" name="tax'+i+'" id="tax'+i+'" onkeyup="Total('+ i +');" placeholder="Tax Percentage"></div>\
<div class="rTableCell"><input name="subtotal'+i+'" type="text" id="subtotal'+i+'" size="10" disabled></div>\
<div class="rTableCell"><input name="salestax'+i+'" type="text" id="salestax'+i+'" size="10" disabled></div>\
<div class="rTableCell"><input name="gtotal'+i+'" type="text" id="gtotal'+i+'" size="10" disabled></div>\
<input type="button" value="-" onclick="removeRow(this)">';
推荐阅读
- mongodb - 无法将数据从我的独立实例导入 MongoDB atlas 集群
- powershell - Powershell:在一个属性上获取唯一性,同时对两个属性进行排序
- amazon-web-services - AWS EC2 上的 Gitlab Runner 自动缩放 - 无法生成实例
- sql - 如何在 GROUP BY 语句中排除唯一属性
- istio - Istio URI 与 Rewrite 匹配
- kotlin-multiplatform-mobile - 是否可以在 xcode 中隐藏自动包含的 KMM 变量?
- database - 如何在一个索引上运行聚合查询并将聚合数据存储在弹性搜索中的另一个索引中
- javascript - 如何使用创建动态相关菜单
- 和
- JSP MySql 数据库中的标签?
- typescript - 打字稿理解类型定义
- sql - 一个 SQL Server 约束中的 UNIQUE 和 OR?