0

次の部分的に完成したコード例では、任意のテーブル セルをクリックすると最初のinputテキスト ボックスにデータが入力されます。2 番目と 3 番目の入力フィールドに入力するには、テーブルを 2 番目と 3 番目にクリックしてください。そして、4 番目のテキスト セルをクリックすると、最初のフィールドから値を入力してカウント オーバーを開始します。

この関数には、ページが最初に読み込まれるときに最初のマウス クリックを認識しないという小さなバグもあります。最初のフィールドに入力するには、2 回目のクリックが必要です。

これを解決し、そこから学ぶのを手伝ってくれてありがとう。:)

<html>
<head>
    <style>
        td:hover { cursor: hand; color: blue; font-weight: bold; background: #FFDE00; }
    </style>
</head>

<body >

    <p>Click on a cell to have it populate the text fields below<p>

    <table border="1" onclick="populateFields()" style=font-size:11; cellspacing="1" cellpadding="5">
        <tr><td>apple</td><td>orange</td><td>banana</td><td>peach</td></tr>
        <tr><td>tomato</td><td>potato</td><td>onion</td><td>garlic</td></tr>
        <tr><td>chicken</td><td>fish</td><td>beef</td><td>pork</td></tr>
    </table>

    <form>
        <p>The cells you clicked on contain this data:</p>
        <input type="text" name="item1" id="txtCellData"></input>
        <input type="text" name="item2" id="textCellData2"></input>
        <input type="text" name="item3" id="textCellData3"></input>
    </form>

    <script> 
        function populateFields(){
            //put all tds in an array
            var alltds = document.getElementsByTagName("td");

            //go through each item in the array
            for (var i in alltds) {
              alltds[i].onclick = function (){
                txtCellData.value = this.innerHTML;
              }
            }
        }

        function setThis(value) {
            document.getElementById("txtCellData").value = value;
        }
    </script> 

</body>
</html>
4

1 に答える 1