私は表のセルの値を変更する必要が

Question

function myFunction() { 
    var x = document.getElementById("mySelect").value; 
    document.getElementById("demo").innerHTML = x ; 
} 

が、私はこれが私の例 ある各テーブルTD

にそれを使用することができるようにしたいコンボボックスの値に応じてonclickの各テーブルセルを変更する必要がありますコンボボックスで選択した値に従って、それはalwayse最初のセルだけではないに各セルに変更されたonclick

私は は私が必要とする助けてください、私は任意のセルでクリックしたとき、それはコンボボックスの値に変化することの助けを必要としてください

これは私の例

https://jsfiddle.net/h5mdj1w7/1/

Answer 1

使用jQueryイベントのonclickこれを達成するためです。

$("td").on("click", function(){ 
    var x = document.getElementById("mySelect").value; 
    $(this).html(x); 
}) 

$("td").on("click", function(){ 
 
\t var x = document.getElementById("mySelect").value; 
 
    $(this).html(x); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h3>A demonstration of how to access a SELECT element</h3> 
 

 
<select id="mySelect" > 
 
    <option>Apple</option> 
 
    <option>Pear</option> 
 
    <option>Banana</option> 
 
    <option>Orange</option> 
 
    <option>Apple</option> 
 
    <option>Pear</option> 
 
    <option>Banana</option> 
 
    <option>Orange</option> 
 
</select> 
 

 
<table style="width:700px;height:700px;margin:0 auto;border:1px solid black;" > 
 
<tr> 
 
    <td style="border:1px solid black;border-collapse:collapse;" > <div>Try it</div></td> 
 
    <td style="border:1px solid black;border-collapse:collapse;" > <div>Try it</div></td> 
 
    <td style="border:1px solid black;border-collapse:collapse;" > <div>Try it</div></td> 
 
    <td style="border:1px solid black;border-collapse:collapse;" > <div>Try it</div></td> 
 
\t <td style="border:1px solid black;border-collapse:collapse;" > <div>Try it</div></td> 
 
\t <td style="border:1px solid black;border-collapse:collapse;" > <div>Try it</div></td> 
 
</tr> 
 
<tr> 
 
    <td style="border:1px solid black;border-collapse:collapse;" > <div>Try it</div></td> 
 
    <td style="border:1px solid black;border-collapse:collapse;" > <div>Try it</div></td> 
 
    <td style="border:1px solid black;border-collapse:collapse;" > <div>Try it</div></td> 
 
    <td style="border:1px solid black;border-collapse:collapse;" > <div>Try it</div></td> 
 
\t <td style="border:1px solid black;border-collapse:collapse;" > <div>Try it</div></td> 
 
\t <td style="border:1px solid black;border-collapse:collapse;" > <div>Try it</div></td> 
 
</tr> 
 
<tr> 
 
\t <td style="border:1px solid black;border-collapse:collapse;" > <div>Try it</div></td> 
 
    <td style="border:1px solid black;border-collapse:collapse;" > <div>Try it</div></td> 
 
    <td style="border:1px solid black;border-collapse:collapse;" > <div>Try it</div></td> 
 
    <td style="border:1px solid black;border-collapse:collapse;" > <div>Try it</div></td> 
 
\t <td style="border:1px solid black;border-collapse:collapse;" > <div>Try it</div></td> 
 
\t <td style="border:1px solid black;border-collapse:collapse;" > <div>Try it</div></td> 
 
</tr> 
 
<tr> 
 
    <td style="border:1px solid black;border-collapse:collapse;" > <div>Try it</div></td> 
 
    <td style="border:1px solid black;border-collapse:collapse;" > <div>Try it</div></td> 
 
    <td style="border:1px solid black;border-collapse:collapse;" > <div>Try it</div></td> 
 
    <td style="border:1px solid black;border-collapse:collapse;" > <div>Try it</div></td> 
 
\t <td style="border:1px solid black;border-collapse:collapse;" > <div>Try it</div></td> 
 
\t <td style="border:1px solid black;border-collapse:collapse;" > <div>Try it</div></td> 
 
</tr> 
 
</table>