JS変数からHTMLフィールドを設定できませんか？

HTMLセルをクリックしてそのセルのhtmlデータを取得しようとすると、フォームフィールドに貼り付けて後のプロセスで使用します。私は直接このようにコードする場合、私はこのフィールドの値を私が望むものに設定することができます：blah = 99;しかし、私は変数やセルの内容にそのハード値を変更する場合は動作しません。私は一日中それを警告することができます、私はちょうど私の人生のためのフォームフィールドに行くための値を取得することはできません。私は何が欠けていますか？JS変数からHTMLフィールドを設定できませんか？

var tbl = document.getElementById("tblMain"); 
 
if (tbl != null) { 
 
    for (var i = 0; i < tbl.rows.length; i++) { 
 
     for (var j = 0; j < tbl.rows[i].cells.length; j++) 
 
      tbl.rows[i].cells[j].onclick = function() { 
 
       getval(this); 
 
      }; 
 
    } 
 
} 
 

 
function getval(cel) { 
 
    var theTarget; 
 
    theTarget = cel.innerHTML; 
 
    document.getElementById("status").value = cel.innerHTML; 
 
}

<center> 
 
    Click on below table cell to find its value. 
 
    <br /> 
 
</center> 
 
<table align="center" id="tblMain" border="1" style="cursor: pointer;"> 
 
    <tr> 
 
    <td> 
 
     R1C1 
 
    </td> 
 
    <td> 
 
     R1C2 
 
    </td> 
 
    <td> 
 
     R1C3 
 
    </td> 
 
    <td> 
 
     R1C4 
 
    </td> 
 
    </tr> 
 
</table><br><br> 
 
<p align="center"><input name="status" type="text" id="status" style="color: #000; border: #000 1px solid;" size="5"> 
 
</p>

出典

2017-12-28 harp

内部に「this」は何ですか'getval（this）'？ –

は使用しないでください。永久に廃止されました。 – zfrisch

はい私はちょうどコードをテストしていることを知っています。 – harp

それは動作します。 innerHTMLには実際のテキストの周囲に余白がありすぎているだけです。それを取り除くにはtrim()を使用してください。

<html> 
 
<head> 
 
    <title>Find table cell value on cell (table) click using JavaScript</title> 
 
    </head> 
 
<body> 
 
    <center> 
 
     Click on below table cell to find its value. 
 
     <br /> 
 
    </center> 
 
    <table align="center" id="tblMain" border="1" style="cursor: pointer;"> 
 
     <tr> 
 
      <td> 
 
       R1C1 
 
      </td> 
 
      <td> 
 
       R1C2 
 
      </td> 
 
      <td> 
 
       R1C3 
 
      </td> 
 
      <td> 
 
       R1C4 
 
      </td> 
 
     </tr> 
 
    </table><br><br> 
 
    <p align="center"><input name="status" type="text" id="status" style="color: #000; border: #000 1px solid;" size="5"> 
 
</p> 
 
<script language="javascript"> 
 
     var tbl = document.getElementById("tblMain"); 
 
     if (tbl != null) { 
 
      for (var i = 0; i < tbl.rows.length; i++) { 
 
       for (var j = 0; j < tbl.rows[i].cells.length; j++) 
 
        tbl.rows[i].cells[j].onclick = function() { 
 
        getval(this); }; 
 
      } 
 
     } 
 
     function getval(cel) { 
 
      var theTarget; 
 
      theTarget = cel.innerHTML; 
 
      document.getElementById("status").value = cel.innerHTML.trim(); 
 
     } 
 
    </script> 
 
</body> 
 
</html>

出典

2017-12-28 17:29:22 Dmitry

本当に@harpこれは答えです –

あなたは、文字列cel.innerHTML.replace(/^\s+|\s+$/g,'');の前後にスペースを削除する正規表現を使用することができ、これはtrim()

var tbl = document.getElementById("tblMain"); 
 
      if (tbl != null) { 
 
       for (var i = 0; i < tbl.rows.length; i++) { 
 
        for (var j = 0; j < tbl.rows[i].cells.length; j++) 
 
         tbl.rows[i].cells[j].onclick = function() { getval(this); }; 
 
       } 
 
      } 
 
      function getval(cel) { 
 
    \t \t \t var theTarget; 
 
    \t \t \t theTarget = cel.innerHTML; 
 
    \t \t \t document.getElementById("status").value = cel.innerHTML.replace(/\s/g, ""); 
 
      }

<center> 
 
      Click on below table cell to find its value. 
 
      <br /> 
 
     </center> 
 
     <table align="center" id="tblMain" border="1" style="cursor: pointer;"> 
 
      <tr> 
 
       <td> 
 
        R1C1 
 
       </td> 
 
       <td> 
 
        R1C2 
 
       </td> 
 
       <td> 
 
        R1C3 
 
       </td> 
 
       <td> 
 
        R1C4 
 
       </td> 
 
      </tr> 
 
     </table><br><br> 
 
     <p align="center"><input name="status" type="text" id="status" style="color: #000; border: #000 1px solid;" size="5"> 
 
    </p>

をサポートしていない恐竜のブラウザでサポートされます

出典

2017-12-28 17:37:43

JS変数からHTMLフィールドを設定できませんか？

答えて

関連する問題