accessing values of dynamic table row using javascript

Question

i am writing a js code for creating a dynamic table with 3 columns per row viz.

textbox1 | textbox2 | textbox3
textbox1 | textbox2 | textbox3 ..

what i'm trying to do is take values of textbox1 and textbox2 and show the multiplication result of these values in textbox 3.

but my script ain't working.. Kindly suggest the remedy or a better way to do this ...

code :

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 goes like this:

<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>

Muthu Kumaran · Accepted Answer · 2012-08-09 09:05:55Z

I modified your code, it should multiply when you add new rows,

Here is the Working Demo

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>

SCRIPT:

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;

}

Germann Arlington · Accepted Answer · 2012-08-09 08:54:49Z

0

Your JavaScript code refers to hard-coded element ids, so it will NEVER work with any other ids as it is.
I suggest you use the same naming convention for your existing row(s) as for the ones that you create in your script. Also give an id to each of the rows and pass that id to your store3() function [you should really call it something like calculateSum() or something similar, it is always better to have meaningful names] - then you can work out dynamic ids for each of the fields from the id passed to the function.

answered Aug 9, 2012 at 8:54

Germann Arlington

3,3532 gold badges19 silver badges21 bronze badges

2 Comments

Nikhil Over a year ago

can you pls provide me with a better code or some reference script ?

Germann Arlington Over a year ago

OK. Few pointers and notes (so that YOU can make this better script yourself): 1) never create numeric ids just by concatenating two numbers (result = number1 + '' + number2) - if you do, you leave yourself open to problems with number1 = 1; number2 = 11; and number1 = 11; number2 = 1; both cases will generate the same result id. 2) Best way to call a function is with the variable, my personal choice is calling it with "this" or any derivative (i.e. this.id, this.otherProperty...).

Collectives™ on Stack Overflow

accessing values of dynamic table row using javascript

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related