4

私はJavaScriptが初めてで、「Tab」が押されたときに行を動的に生成し、動的に生成された行に入力された値を取得して、これらの値をサーブレットコードで使用できるようにしたいと考えています。

これが私の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; 
}

ただし、「Enter」キー以外の「Tab」やその他のキーは検出しません。このプログラムで「Tab」またはその他のキーを検出する方法と、これらの動的に生成された行に入力された値にアクセスする方法を教えてください。

4

2 に答える 2

1

イベント ハンドラーの設定が正しくありません。そのはず：

element4.onkeypress=KeyCheck

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

キーについては、キーコード 9Tabで処理する必要がありますkeydown。フィールド内の値内の値を取得するにvalueは、DOM 要素のプロパティにアクセスするだけです。

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

于 2012-11-06T09:22:22.643 に答える
1

行を追加するには、次の 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.

      }
于 2012-11-06T09:43:15.740 に答える