자바 스크립트 테이블 입력

현재 웹 페이지를 만드는 중 프로젝트를 수행 중입니다. 셀에 입력 내용을 기반으로 입력하게하고 싶습니다. 그러나 더 단순하게 만들 수있는 방법은 생각할 수 없습니다. 나는 아직 자바 스크립트에 익숙하지 않으므로 제발 참아주십시오. 자바 스크립트 테이블 입력

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

당신은 this를 받아들이는 당신의 getInput 기능을 다시 쓸 수 있습니다. 아래처럼

그리고 나서 이것을 모든 셀의 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에 대한 링크입니다.

출처

2016-07-21 04:48:49

'document.getElementById'가 필요 없습니다. 그냥'that.innerHTML = input;' – 4castle

@HectorBarbossa를 도와 주셔서 감사합니다. 나는 지금 일하고있는 나의 코드를 가지고있다 –

@ 4castle too –

하나의 기능을 가질 수 있으며 해당 기능을 해당 ID에 전달하고 해당 기능을 해당 시간마다 호출 할 수 있습니다.

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

출처

2016-07-21 04:54:37

자바 스크립트 테이블 입력

답변

관련 문제