Javascript表格輸入

我目前正在做一個創建網頁的項目。我想讓單元格根據我輸入的內容進行輸入。但我想不出任何方法來簡化它。我仍然對JavaScript不熟悉，請耐心等待。 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>

來源

2016-07-21 Elias Chew

我會編輯標題以反映問題的內容。如果人們瞭解問題是什麼，他們更有可能查看您的問題並提供答案。 – jsondwyer

用戶如何點擊一個空元素？ – 4castle

可以重新寫你的getInput函數接受this。像下面一樣

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

然後你可以使用它作爲你所有單元的onclick處理程序。 Like

<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> ...

繼承人鏈接到Fiddle。

來源

2016-07-21 04:48:49

你不需要'document.getElementById'。只要做'that.innerHTML = input;' – 4castle

感謝您幫助我@HectorBarbossa。我現在得到了我的代碼 –

@ 4castle :) –

你可以有一個函數，只需將它傳遞給id並分別調用該函數。

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

來源

2016-07-21 04:54:37

Javascript表格輸入

回答

相關問題