在javascript中动态生成行？ [英] Generating row dynamically in javascript?
问题描述
我是javascript的新手，我想在按下Tab时动态生成行，并希望在动态生成的行中输入值，以便我可以在我的servlet代码中使用这些值。
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.
这是我的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>
row.js文件的代码是：
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;
}
但它不会检测Tab或除Enter之外的任何其他键键。请告诉我如何检测此程序中的Tab或其他键以及如何访问在这些动态生成的行中输入的值。
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.
推荐答案
您正在设置事件处理程序。它应该是：
You're setting up the event handler incorectly. It should be:
element4.onkeypress = KeyCheck
对于 Tab 键，您需要使用键码9处理 keydown 。
获取值内的值在该字段内，只需访问DOM元素的值属性即可。
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 /
这篇关于在javascript中动态生成行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
