Generating row dynamically in javascript?

Question

I am new in javascript and I want to generate rows dynamically when "Tab" is pressed and want to get the values enterd in dynamically generated rows so that i could use these values in my servlet code.

Here is my html

<html>
<head>
<title> Add/Remove dynamic rows in HTML table </title>
<script src="table.js" language="javascript" /></script>
</head>
<body onload="hello()">
    <form action="servletname">
<input type="button" value="Delete Row" onclick="deleteRow()" />        
<table id="table1" width="350px" border="2">
<tr>
    <td align="center"> Sr.No </td>
    <td align="center" style="width:50px;"> Code </td>
    <td align="center" style="width:1100px;"> Test Name </td>
    <td align="center" style="width:80px;"> Rate </td>
</tr>
</table> 
<table id="table2" width="350px" border="2">
<tr>
    <td><input type="checkbox" name="chk"/></td>
    <td> 1 </td>
    <td> <input type="text" id="tc" style="width:50px;" /> </td>
    <td> <input type="text" id="tn" style="width:190px;" /> </td>
    <td> <input type="text" id="rt" style="width:80px;" onkeypress="KeyCheck(event)" /> </td>   
</tr>
</table> 
<br><input type="text" id="rt1" style="width:80px;"/>
</form>
</body>
</html>

code of "row.js" file is:

function hello()
{   
   document.getElementById("tc").focus();
}

function KeyCheck(e)
{
   var KeyID = (window.event) ? event.keyCode : e.keyCode;
   if(KeyID==9)
   {
      addRow();
   }
}

function addRow()
{
    var table = document.getElementById("table2");

    var rowCount = table.rows.length;
    var row = table.insertRow(table.rows.length);

    var cell1 = row.insertCell(0);
    var element1 = document.createElement("input");
    element1.type = "checkbox";
    cell1.appendChild(element1);

    var cell2 = row.insertCell(1);
    cell2.innerHTML = rowCount + 1;

    var cell3 = row.insertCell(2);
    var element2 = document.createElement("input");
    element2.type = "text";
    element2.style.width = "50px";
    cell3.appendChild(element2); 

    var cell4 = row.insertCell(3);
    var element3 = document.createElement("input");
    element3.type = "text";
    cell4.appendChild(element3); 

    var cell5 = row.insertCell(4);
    var element4= document.createElement("input");
    element4.type = "text";
    element4.style.width = "80px";
    cell5.appendChild(element4);

    element4.focus();   // to shift focus on last cell in newly generated row

    //to generate new row if enter is pressed in focused cell of newly generated row.
    element4.onkeypress=KeyCheck; 
}

But it doesnot detect "Tab" or any other key except than "Enter" key. plz tell me how to detect "Tab" or some other key in this program and how can I access values entered in these dyanamically generated rows.

mihai · Answer 1 · 2012-11-07T20:27:42.740

1

You're setting up the event handler incorectly. It should be:

element4.onkeypress=KeyCheck

http://jsfiddle.net/SMDhu/4/

For Tab key you need to handle keydown with keycode 9. To get the value inside the value inside the field, simply access the value property of the DOM element.

http://jsfiddle.net/mihaifm/24s8e/2/

edited Nov 07 '12 at 20:27

answered Nov 06 '12 at 09:22

mihai

37,072
9
60
86

Thanx.... a lot. It works perfectly. I edited the question. Plz analyse it carefully and help me. – Shailender Dubey Nov 07 '12 at 11:28

score 1 · Answer 2 · answered Nov 06 '12 at 09:43

Use the following js function for add row:

function addRow() { var table = document.getElementById("table2");

          var rowCount = table.rows.length;
          var row = table.insertRow(table.rows.length);

          var cell1 = row.insertCell(0);
          var element1 = document.createElement("input");
          element1.type = "checkbox";
          cell1.appendChild(element1);

          var cell2 = row.insertCell(1);
          cell2.innerHTML = rowCount + 1;

          var cell3 = row.insertCell(2);
          var element2 = document.createElement("input");
          element2.type = "text";
          element2.style.width = "50px";
          cell3.appendChild(element2);

          var cell4 = row.insertCell(3);
          var element3 = document.createElement("input");
          element3.type = "text";
          cell4.appendChild(element3);

          var cell5 = row.insertCell(4);
          var element4 = document.createElement("input");
          element4.type = "text";
          element4.style.width = "80px";
          element4.onkeypress = KeyCheck;
          cell5.appendChild(element4);
          element4.focus();// to shift focus on last cell in newly generated row
          //to generate new row if enter is pressed in focused cell of newly generated row.

      }

Generating row dynamically in javascript?

2 Answers2

Linked