使用javascript訪問動態表行的值

Question

我正在寫一個js代碼來創建一個動態表，每行3列，即。

1. textbox1 | textbox2 | 文字框3
2. textbox1 | textbox2 | textbox3 ..

我想做的是獲取textbox1和textbox2的值，並在textbox 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>

Answer 1

我修改了您的代碼，當您添加新行時它應該成倍增加，

這是工作演示

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;

}

Answer 2

您的JavaScript代碼引用了硬編碼的元素ID，因此它將永遠不會與其他任何ID一起使用。
建議您對現有行使用與在腳本中創建的命名約定相同的命名約定。 還要為每個行指定一個ID，並將該ID傳遞給store3（）函數[您應該真正調用它，例如calculateSum（）或類似名稱，最好使用有意義的名稱]-然后就可以動態地計算出傳遞給函數的ID中每個字段的ID。