使用 JavaScript 访问动态表行的值
accessing values of dynamic table row using javascript
我正在编写一个 js 代码,用于创建一个每行 3 列的动态表,即。
- 文本框1 | 文本框2 |文本框3
- 文本框1 | 文本框2 |文本框3..
我正在尝试做的是获取文本框 1 和文本框 2 的值,并在文本框 3 中显示这些值的乘法结果。
但是我的脚本不起作用..请建议补救措施或更好的方法来做到这一点...
法典:
function addRowToTable() {
var tbl = document.getElementById('tblSample');
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);
cellLeft.appendChild(textNode);
var cellRight = row.insertCell(1);
var el = document.createElement('input');
el.setAttribute('type', 'text');
el.setAttribute('id', 'f1' + iteration);
el.setAttribute('size', '22');
cellRight.appendChild(el);
var cellRight = row.insertCell(1);
var el = document.createElement('input');
el.setAttribute('type', 'text');
el.setAttribute('id', 'f2' + iteration);
el.setAttribute('size', '20');
cellRight.appendChild(el);
var cellRight = row.insertCell(1);
var el = document.createElement('input');
el.setAttribute('type', 'text');
el.setAttribute('id', 'f3' + iteration);
el.setAttribute('size', '20');
cellRight.appendChild(el);
}
function removeRowFromTable() {
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}
function store3() {
var tbl = document.getElementById('tblSample');
var rowIterator = tbl.rows.length;
var z = document.getElementById("f3");
z.value = (document.getElementById("f1").value) * (document.getElementById("f2").value) * 1;
}
形式是这样的:
<form action="tableaddrow_nw.html" method="get">
<input type="button" value="Add Position" onclick="addRowToTable();" />
<input type="button" value="Remove Position" onclick="removeRowFromTable();" />
<table border="1" id="tblSample">
<tr>
<td><input type="text" name="f1" id="f1" size="20" onkeyup="store3()"/></td>
<td><input type="text" name="f2" id="f2" size="20" onkeyup="store3()"/></td>
<td><input type="text" name="f3" id="f3" size="20" /></td>
</tr>
</table>
</form>
我修改了你的代码,当你添加新行时它应该会成倍增加,
这是工作演示
.HTML
<form action="tableaddrow_nw.html" method="get">
<input type="button" value="Add Position" onclick="addRowToTable();" />
<input type="button" value="Remove Position" onclick="removeRowFromTable();" />
<table border="1" id="tblSample">
<tr>
<td><input type="text" name="f1" id="f1" size="20" onkeyup="store3('f1','f2', 'f3')"/></td>
<td><input type="text" name="f2" id="f2" size="20" onkeyup="store3('f1','f2', 'f3')"/></td>
<td><input type="text" name="f3" id="f3" size="20" /></td>
</tr>
</table>
脚本:
function addRowToTable()
{
var tbl = document.getElementById('tblSample');
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);
cellLeft.appendChild(textNode);
var cellRight = row.insertCell(1);
var el = document.createElement('input');
el.setAttribute('type', 'text');
el.setAttribute('id', 'f1' + iteration);
el.setAttribute('size', '22');
el.onkeyup = function(){store3('f3' + iteration,'f2' + iteration, 'f1' + iteration)}
cellRight.appendChild(el);
var cellRight = row.insertCell(1);
var el = document.createElement('input');
el.setAttribute('type', 'text');
el.setAttribute('id', 'f2' + iteration);
el.setAttribute('size', '20');
el.onkeyup = function(){store3('f3' + iteration,'f2' + iteration, 'f1' + iteration)}
cellRight.appendChild(el);
var cellRight = row.insertCell(1);
var el = document.createElement('input');
el.setAttribute('type', 'text');
el.setAttribute('id', 'f3' + iteration);
el.setAttribute('size', '20');
el.onkeyup = function(){store3('f3' + iteration,'f2' + iteration, 'f1' + iteration)}
cellRight.appendChild(el);
}
function removeRowFromTable()
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}
function store3(t1, t2, t3)
{
var tbl = document.getElementById('tblSample');
var rowIterator = tbl.rows.length;
var z=document.getElementById(t3);
z.value=(document.getElementById(t1).value)*(document.getElementById(t2).value)*1;
}
你的 JavaScript 代码引用了硬编码的元素 ID,所以它永远不会像现在这样与任何其他 id 一起使用。
我建议您对现有行使用与在脚本中创建的行相同的命名约定。还要给每一行一个 id,并将该 id 传递给你的 store3() 函数 [你真的应该称它为像 calculateSum() 或类似的东西,最好有有意义的名称] - 然后你可以计算出每个字段的动态 id从传递给函数的 id 中
相关文章:
- 动态Javascript表单不起作用
- 从脚本中的动态(javascript)网页获取信息
- 创建动态javascript对象
- HTML 5 帮助.使用websql数据库中的动态javascript渲染选项
- 更改动态 JavaScript 数据
- 将动态javascript变量附加到HTML标记.InnerHTML&insertAdjacentHTML都不正
- addEvenListener不'我不研究动态javascript
- 使用加载时的Codeigner动态javascript->看法
- JSON动态Javascript解析”;未定义”;
- jsf应用程序中的动态javascript
- UpdatePanel中自定义控件内的动态javascript
- 使用wro4j创建动态javascript捆绑包
- 如何在PHP中包含动态Javascript页面的静态HTML结果
- 动态JavaScript与rail一起徘徊
- 在 Symfony 2 中生成动态 JavaScript 的正确方法
- For 循环中的动态 Javascript 条件
- 如何确定调用动态 JavaScript 文件的页面和 ASP.net 中的用户
- 是否可以缓存具有指向动态JavaScript的链接的HTML页面
- 动态 javascript,用于检测复选框是否被选中并禁用相应的输入字段
- 如何制作具有键和值组的动态JavaScript数组