2017-08-12 7 views
-2

テーブルに行を動的に追加する必要があるという要件があります。 "試してください"ボタンのOnclickは正しく動作しますが、要件に応じて、私はぼかしイベントで使用していますが、動作していないように、どこでもクリックするとJavascriptイベントを呼び出す必要があります。javascript onBlurまたはonkeypressイベントを使用してテーブルに動的に行を追加する方法

function myFunction() { 
 
     var table = document.getElementById("myTable"); 
 
     var row = table.insertRow(0); 
 
     var cell1 = row.insertCell(0); 
 
     var cell2 = row.insertCell(1); 
 
     cell1.innerHTML = "NEW CELL1"; 
 
     cell2.innerHTML = "NEW CELL2"; 
 
     
 
     }
table, td { 
 
     border: 1px solid black; 
 
    }
<body onblur="myFunction()"> 
 
<p>Click the button to add a new row at the first position of the table and then add cells and content.</p> 
 

 
    <table id="myTable"> 
 
     <tr> 
 
     <td>Row1 cell1</td> 
 
     <td>Row1 cell2</td> 
 
     </tr> 
 
     
 
    </table> 
 
    <br> 
 

 
    <button onclick="myFunction()">Try it</button><br> 
 
    </body>

上記のスニペットはonclickの機能のために動作しますが、私は、画面上または単にキーボードの任意のキーを押すことにより、任意の場所をクリックしたときに動的に行を追加します。

+0

を使用することができますキーの押下を確認するために

は 'onClick'にonBlur''変更してみてください。これは、本文の任意の場所をクリックすると新しい行が追加されます。 –

答えて

0

アレックスWのように、本体にはonClick()を使用してください。ただし、本体の前には必ずJavaScriptを読み込んでください。あなたは

document.addEventListener('keydown', function(event) { 
    var key_code = event.keyCode; 
    if (key_code === 38) { 
     alert('test); 
    } 
}); 
関連する問題