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.

Th3Nic3Guy · Accepted Answer · 2012-11-06 09:43:15Z

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.

      }

mihai · Accepted Answer · 2012-11-07 20:27:42Z

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 7, 2012 at 20:27

answered Nov 6, 2012 at 9:22

mihai

38.8k11 gold badges63 silver badges90 bronze badges

1 Comment

Shailender Dubey Over a year ago

Thanx.... a lot. It works perfectly. I edited the question. Plz analyse it carefully and help me.

Collectives™ on Stack Overflow

Generating row dynamically in javascript?

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related