尝试使用 javascript 获取动态添加的行的水平乘积
Trying to get horizontal product of dynamically added rows with javascript
我正在尝试使用"添加"和"删除"按钮动态添加的两个行的输入字段相乘。我有一个单独的javascript工作，它将所有产品相加并在底部汇总。
在下面的示例中，我已经可以在底部获取所有 z 字段的总和，但在如何获取每行 x 和 y 的乘积方面存在问题。我正在使用的总和 javascript 抓取带有类"z"的所有内容并将它们相加
我用于求和的JavaScript如下。 问题是我不知道会有多少行，名称和 ID 属性附加了 1，2，3 等等
[x] * [y] = [z]?
[x1] * [y1] = [z1]?
[x2] * [y2] = [z2]?
[z+z1+z2]
<script type="text/javascript">
function calcz() {
var inputs = document.getElementsByClassName('z');
var sum = 0;
for(var i = 0; i < inputs.length; i++) {
var input = inputs[i];
var num = Number(input.value);
if(isNaN(num)) {
alert('Please Enter a valid number: ' + input.value);
num = 0;
}
sum += num;
}
document.getElementById('zresult').value = '$' + sum;
这应该给你一个想法：
<div id="table">
<div class="row">
<input type="text" class="x"/>
<input type="text" class="y"/>
<input type="text" class="z"/>
</div>
<div class="row">
<input type="text" class="x"/>
<input type="text" class="y"/>
<input type="text" class="z"/>
</div>
</div>
<input type="text" id="total"/>
<button onclick='addRow()'> + Row</button>
<button onclick='removeRow()'> - Row</button>
<button onclick='calc()'>Calc</button>
<script type="text/javascript">
function calc() {
var rows = document.getElementsByClassName('row');
var total = document.getElementById('total');
var zTotal = 0;
for(var rowIdx = 0; rowIdx < rows.length; rowIdx++) {
var row = rows[rowIdx];
var inputX = row.getElementsByClassName('x')[0];
var inputY = row.getElementsByClassName('y')[0];
var inputZ = row.getElementsByClassName('z')[0];
var x = Number(inputX.value);
var y = Number(inputY.value);
var z = x * y;
inputZ.value = z;
zTotal += z;
}
total.value = zTotal;
}
function addRow() {
var table = document.getElementById('table');
var row = document.createElement('div');
row.setAttribute('class', 'row');
row.type = 'text';
var inputX = document.createElement('input');
inputX.setAttribute('class', 'x');
inputX.type = 'text';
var inputY = document.createElement('input');
inputY.setAttribute('class', 'y');
inputY.type = 'text';
var inputZ = document.createElement('input');
inputZ.setAttribute('class', 'z');
inputZ.type = 'text';
row.appendChild(inputX);
row.appendChild(inputY);
row.appendChild(inputZ);
table.appendChild(row);
}
function removeRow() {
var table = document.getElementById('table');
if (table.children.length > 1) {
var row = table.childNodes[table.children.length - 1];
table.removeChild(row);
}
}
</script>
user1202589的编辑
<script LANGUAGE="JavaScript">
// Last updated 2006-02-21
function addRowToTable()
{
var tbl = document.getElementById('myTable');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
// left cell
var cellLeft = row.insertCell(0);
var textNode = document.createTextNode(iteration);
var el = document.createElement('input');
el.type = 'text';
el.name = 'service_description' + iteration;
el.id = 'txtRow' + iteration;
el.size = 55;
cellLeft.appendChild(el);
cellLeft.appendChild(textNode);
// right cell
var cellRight = row.insertCell(1);
var eel = document.createElement('input');
eel.type = 'text';
eel.name = 'term' + iteration;
eel.id = 'txtRow' + iteration;
eel.size = 4
cellRight.appendChild(eel);
var cellRight1 = row.insertCell(2);
var el = document.createElement('input');
el.type = 'text';
el.name = 'x' + iteration;
el.id = 'txtRow' + iteration;
el.setAttribute('class', 'x');
el.onblur = function(){calc();};
el.class = 'x'
el.size = 4;
cellRight1.appendChild(el);
var cellRight2 = row.insertCell(3);
var el = document.createElement('input');
el.type = 'text';
el.setAttribute('class', 'y');
el.onblur = function(){productcalc();};
el.name = 'y' + iteration;
el.id = 'txtRow' + iteration;
el.size = 4;
cellRight2.appendChild(el);
var cellRight4 = row.insertCell(5);
var el = document.createElement('input');
el.setAttribute('class', 'mrc');
el.onblur = function(){calcmrc('mrc','mrcresult');};
el.type = 'text';
el.name = 'mrc' + iteration;
el.id = 'mrc';
el.size = 4;
cellRight4.appendChild(el);
}
function removeRowFromTable()
{
var tbl = document.getElementById('myTable');
var lastRow = tbl.rows.length;
if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}
<div class="row" align="center">
<p>
<input type="button" class="formbutton" value="Add" onclick="addRowToTable();" />
<input type="button" class="formbutton" value="Remove" onclick="removeRowFromTable();" />
</p>
<p>
</p>
<table width="75%" border="1" id="myTable">
<tr >
<td >Service Description</td>
<td>Term</td>
<td>x</td>
<td>y</td>
<td>MRC</td>
</tr>
<tr>
<td><input type="text" name="service_description"
"id="txtRow1" size='55' /></td>
<td><input type="text" name="term" class="term"
value="36 Month" id="txtRow1" size='4' /></td>
<td><input type="text" name="x" class="x"
id="txtRow1" onBlur="productcalc()" size='4' /></td>
<td><input type="text" name="y" class="y"
id="txtRow1" size='4' onBlur="productcalc()" /></td>
<td>
<input type="text" name="mrc"
class="mrc" onBlur="calcmrc('mrc','mrcresult')" id="mrc" size='4' />
</td>
很少有变化，我认为这可能是您正在寻找的，或者至少在正确的方向上。
cript type="text/javascript">
// Last updated 2006-02-21
function addRowToTable()
{
var tbl = document.getElementById('tblBlock').tBodies[0];
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow + 1;
var row = tbl.insertRow(lastRow);
// left cell
var cellLeft = row.insertCell(0);
var el = document.createElement('input');
el.type = 'text';
el.name = 'service_description' + iteration;
el.id = 'txtRow' + iteration;
el.size = 55;
cellLeft.appendChild(el);
var textNode = document.createTextNode(iteration);
cellLeft.appendChild(textNode);
// right cell
var cellRight = row.insertCell(1);
var eel = document.createElement('input');
eel.type = 'text';
eel.name = 'term' + iteration;
eel.id = 'txtRow' + iteration;
eel.size = 4
cellRight.appendChild(eel);
var cellRight1 = row.insertCell(2);
var el = document.createElement('input');
el.type = 'text';
el.name = 'price' + iteration;
el.id = 'txtRow' + iteration;
el.setAttribute('class', 'price');
el.onblur = function() { productcalc(); };
el.class = 'price'
el.size = 4;
cellRight1.appendChild(el);
var cellRight2 = row.insertCell(3);
var el = document.createElement('input');
el.type = 'text';
el.setAttribute('class', 'qt');
el.onblur = function() { productcalc(); };
el.name = 'qt' + iteration;
el.id = 'txtRow' + iteration;
el.size = 4;
cellRight2.appendChild(el);
var cellRight3 = row.insertCell(4);
var el = document.createElement('input');
el.type = 'text';
el.name = 'nrc' + iteration;
el.setAttribute('class', 'nrc');
el.onblur = function() { calcnrc('nrc','nrcresult'); };
el.class = 'nrc'
el.id = 'nrc';
el.size = 4;
cellRight3.appendChild(el);
var cellRight4 = row.insertCell(5);
var el = document.createElement('input');
el.setAttribute('class', 'mrc');
el.onblur = function() { calcmrc('mrc','mrcresult'); };
el.type = 'text';
el.name = 'mrc' + iteration;
el.id = 'mrc';
el.size = 4;
cellRight4.appendChild(el);
}
function removeRowFromTable() {
var tbl = document.getElementById('tblBlock').tBodies[0];
var lastRow = tbl.rows.length;
if (lastRow > 1) tbl.deleteRow(lastRow - 1);
calcnrc();
calcmrc();
productcalc();
}
</script>
<script type="text/javascript">
function calcnrc() {
var inputs = document.getElementsByClassName('nrc');
var sum = 0;
for(var i = 0; i < inputs.length; i++) {
var input = inputs[i];
var num = Number(input.value);
if(isNaN(num)) {
alert('Please enter a valud number: ' + input.value);
num = 0;
}
sum += num;
}
document.getElementById('nrcresult').value = '$' + sum;
}
</script>
<script type="text/javascript">
function calcmrc() {
var inputs = document.getElementsByClassName('mrc');
var sum = 0;
for(var i = 0; i < inputs.length; i++) {
var input = inputs[i];
var num = Number(input.value);
if(isNaN(num)) {
alert('Please Enter a valid number: ' + input.value);
num = 0;
}
sum += num;
}
document.getElementById('mrcresult').value = '$' + sum;
}
</script>
<script type="text/javascript">
function productcalc() {
var tbl = document.getElementById('tblBlock').tBodies[0];
var rows = tbl.children;
var total = document.getElementById('mrcresult');
var zTotal = 0;
for(var rowIdx = 0; rowIdx < rows.length; rowIdx++) {
var row = rows[rowIdx];
var inputX = row.getElementsByClassName('price')[0];
var inputY = row.getElementsByClassName('qt')[0];
var inputZ = row.getElementsByClassName('mrc')[0];
var x = Number(inputX.value);
var y = Number(inputY.value);
var z = x * y;
inputZ.value = z;
zTotal += z;
}
total.value = '$' + zTotal;
}
</script>
<div align="center">
<p>
<input type="button" class="formbutton" value="Add" onclick="addRowToTable();" />
<input type="button" class="formbutton" value="Remove" onclick="removeRowFromTable();" />
</p>
<p>
</p>
<table width="75%" border="1" id="tblBlock">
<thead>
<tr>
<td>Service Description</td>
<td>Term</td>
<td>Price</td>
<td>QT</td>
<td>NRC</td>
<td>MRC</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="service_description"id="txtRow1" size='55' /></td>
<td><input type="text" name="term" class="term" value="36 Month" id="txtRow1" size='4' /></td>
<td><input type="text" name="price" class="price" id="txtRow1" onBlur="productcalc()" size='4' /></td>
<td><input type="text" name="qt" class="qt" id="txtRow1" size='4' onBlur="productcalc()" /></td>
<td><input type="text" name="nrc" class="nrc" onBlur="calcnrc('nrc','nrcresult')" id="nrc" size='4' /></td>
<td><input type="text" name="mrc" class="mrc" onBlur="calcmrc('nrc','mrcresult')" id="mrc" size='4' /></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td><input type="text" name="nrcresult" id="nrcresult" /></td>
<td><input type="text" name="mrcresult" id="mrcresult" /></td>
</tr>
</tfoot>
</table>
<br><br>
</div>
相关文章：
- 正在添加'X'按钮，在文本字段旁边使用javascript
- 如何在映射数组中添加换行符
- 正在将数据主题添加到所有项目
- ZeroClipboard-在复制之前添加到值
- 我可以在json对象中添加一个函数吗
- 将输入字段中的文本提交到我的数据库，同时将其添加到我的列表中
- 当任何块级元素的视口较窄时，添加水平滚动条
- 尝试使用 javascript 获取动态添加的行的水平乘积
- 将子菜单添加到水平菜单
- 为什么水平列表项对正不适用于动态添加的项
- 水平地添加一个接一个的背景图像
- 每当浏览器添加滚动条时，内容都会水平跳转
- 向表格添加水平顶部滚动条的Aurelia方式
- 为d3-2way-tree添加水平和垂直滚动条，用于多层树
- 背景颜色添加在特定的滚动水平
- 在html表上正确地添加水平滚动条
- 网页设计:避免水平;跳跃”;通过添加左边的空白，对内容进行编辑.但这是怎么回事
- 有没有一种方法可以为使用小控件制作的条形图添加水平滚动条
- 使用javascript在2个按钮之间添加水平空间
- 我如何添加水平滚动条在我的Extjs Ext.Panel
