Generating a string dynamically in javascript?

I am new to javascript and I want to dynamically generate lines when I press Tab and want to get enterd values ​​in dynamically generated lines so that I can 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> 

The code for the file "row.js":

 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 does not detect Tab or any key other than Enter. Plz tell me how to detect a β€œTab” or some other key in this program and how can I access the values ​​entered in these lines created using a diaman.

+4
source share
2 answers

You are setting up an event handler. It should be:

element4.onkeypress=KeyCheck

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

For the Tab key, you need to handle keydown using code key 9. To get the value inside the value inside the field, simply enter the value property of the DOM element.

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

+1
source

Use the following js function to add a string:

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. } 
+1
source

Source: https://habr.com/ru/post/1444293/


All Articles