JavaScriptテーブルの入力

Question

私は現在、Webページの作成に関するプロジェクトを行っています。私は細胞が入力したものに基づいて入力をしたいと思っていますが、それをもっと簡単にする方法は考えられません。私はまだjavascriptに新しいので、私と一緒に耐えてください。

function getInput(){ 
 
\t var input = prompt("Please enter your plan here"); 
 
\t document.getElementById("data").innerHTML = input; 
 
} 
 
function getInput1(){ 
 
\t var input = prompt("Please enter your plan here"); 
 
\t document.getElementById("data1").innerHTML = input; 
 
} 
 
function getInput2(){ 
 
\t var input = prompt("Please enter your plan here"); 
 
\t document.getElementById("data2").innerHTML = input; 
 
} 
 
function getInput3(){ 
 
\t var input = prompt("Please enter your plan here"); 
 
\t document.getElementById("data3").innerHTML = input; 
 
} 
 
function getInput4(){ 
 
\t var input = prompt("Please enter your plan here"); 
 
\t document.getElementById("data4").innerHTML = input; 
 
} 
 
function getInput5(){ 
 
\t var input = prompt("Please enter your plan here"); 
 
\t document.getElementById("data5").innerHTML = input; 
 
} 
 
function getInput6(){ 
 
\t var input = prompt("Please enter your plan here"); 
 
\t document.getElementById("data6").innerHTML = input; 
 
} 
 
function getInput7(){ 
 
\t var input = prompt("Please enter your plan here"); 
 
\t document.getElementById("data7").innerHTML = input; 
 
} 
 
function getInput8(){ 
 
\t var input = prompt("Please enter your plan here"); 
 
\t document.getElementById("data8").innerHTML = input; 
 
} 
 
function getInput9(){ 
 
\t var input = prompt("Please enter your plan here"); 
 
\t document.getElementById("data9").innerHTML = input; 
 
} 
 
function getInput10(){ 
 
\t var input = prompt("Please enter your plan here"); 
 
\t document.getElementById("data10").innerHTML = input; 
 
} 
 
function getInput11(){ 
 
\t var input = prompt("Please enter your plan here"); 
 
\t document.getElementById("data11").innerHTML = input; 
 
} 
 
function getInput12(){ 
 
\t var input = prompt("Please enter your plan here"); 
 
\t document.getElementById("data12").innerHTML = input; 
 
} 
 
function getInput13(){ 
 
\t var input = prompt("Please enter your plan here"); 
 
\t document.getElementById("data13").innerHTML = input; 
 
} 
 
function getInput14(){ 
 
\t var input = prompt("Please enter your plan here"); 
 
\t document.getElementById("data14").innerHTML = input; 
 
} 
 
function getInput15(){ 
 
\t var input = prompt("Please enter your plan here"); 
 
\t document.getElementById("data15").innerHTML = input; 
 
} 
 
function getInput16(){ 
 
\t var input = prompt("Please enter your plan here"); 
 
\t document.getElementById("data16").innerHTML = input; 
 
} 
 
function getInput17(){ 
 
\t var input = prompt("Please enter your plan here"); 
 
\t document.getElementById("data17").innerHTML = input; 
 
} 
 
function getInput18(){ 
 
\t var input = prompt("Please enter your plan here"); 
 
\t document.getElementById("data18").innerHTML = input; 
 
} 
 
function getInput19(){ 
 
\t var input = prompt("Please enter your plan here"); 
 
\t document.getElementById("data19").innerHTML = input; 
 
} 
 
function getInput20(){ 
 
\t var input = prompt("Please enter your plan here"); 
 
\t document.getElementById("data20").innerHTML = input; 
 
}

<table>  
 
<tr> 
 
\t \t <td class="tg-031e">0000</td> 
 
\t \t <td class="tg-031e" id="data" onclick="getInput()"></td> 
 
\t \t <td class="tg-031e" id="data1" onclick="getInput1()"></td> 
 
    <td class="tg-031e" id="data2" onclick="getInput2()"></td> 
 
    <td class="tg-031e" id="data3" onclick="getInput3()"></td> 
 
    <td class="tg-031e" id="data4" onclick="getInput4()"></td> 
 
    <td class="tg-031e" id="data5" onclick="getInput5()"></td> 
 
    <td class="tg-031e" id="data6" onclick="getInput6()"></td> 
 
    </tr> 
 
    <tr> 
 
\t \t <td class="tg-031e">0100</td> 
 
\t \t <td class="tg-031e" id="data7" onclick="getInput7()"></td> 
 
    <td class="tg-031e" id="data8" onclick="getInput8()"></td> 
 
    <td class="tg-031e" id="data9" onclick="getInput9()"></td> 
 
    <td class="tg-031e" id="data10" onclick="getInput10()"></td> 
 
    <td class="tg-031e" id="data11" onclick="getInput11()"></td> 
 
    <td class="tg-031e" id="data12" onclick="getInput12()"></td> 
 
    <td class="tg-031e" id="data13" onclick="getInput13()"></td> 
 
    </tr> 
 
    <tr> 
 
\t <td class="tg-031e">0200</td> 
 
\t <td class="tg-031e" id="data14" onclick="getInput14()"></td> 
 
    <td class="tg-031e" id="data15" onclick="getInput15()"></td> 
 
    <td class="tg-031e" id="data16" onclick="getInput16()"></td> 
 
    <td class="tg-031e" id="data17" onclick="getInput17()"></td> 
 
    <td class="tg-031e" id="data18" onclick="getInput18()"></td> 
 
    <td class="tg-031e" id="data19" onclick="getInput19()"></td> 
 
    <td class="tg-031e" id="data20" onclick="getInput20()"></td> 
 
    </tr> 
 
</table>

Answer 1

あなたはthisを受け入れるようにgetInput機能を再書き込みすることができます。以下のように

function getInput(that){ 
    var input = prompt("Please enter your plan here"); 
    that.innerHTML = input; 
} 

を入力して、これをすべてのセルのonclickハンドラとして使用できます。同様のもの

<td class="tg-031e" id="data10" onclick="getInput(this)"></td> 
<td class="tg-031e" id="data11" onclick="getInput(this)"></td> 
<td class="tg-031e" id="data12" onclick="getInput(this)"></td> 
<td class="tg-031e" id="data13" onclick="getInput(this)"></td> ... 

HeresへのリンクFiddle。

Answer 2

あなたは1つの関数を持つことができ、それをidに渡してその関数をそれぞれ呼び出すことができます。