Question

我是javascript的新手，我想在按下“Tab”时动态生成行，并且想要在动态生成的行中输入值，以便我可以在我的servlet代码中使用这些值。

这是我的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”文件的代码是：

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”或其他键，以及如何访问在这些动态生成的行中输入的值。

Answer 1

您正在设置事件处理程序。它应该是：

element4.onkeypress=KeyCheck

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

对于 Tab 键，您需要使用键码9处理keydown。要获取字段内值的值，只需访问DOM元素的value属性即可。

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

Answer 2

使用以下js函数添加行：

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.

      }

在javascript中动态生成行？

2 个答案: