td에 입력 텍스트 필드

Question

사용자가 이름과 성을 넣을 웹 사이트를 만들면 텍스트가 테이블 데이터로 전송됩니다. 나의 첫 번째 입력은 첫 번째 테이블의 데이터 나는 (누군가가 나를 도울 수 있습니다!) 롤 두 번째 테이블 데이터에

<h1 align="center">INFORMATION</h1> 
Name: <input id="first_name" size="30" type="text"> 
LastName: <input type="text" size="30" id="lastname"> 
<button class="okok" name="myBtn" type="submit" value="Submit Data" onClick="ajax_post();">GO </button> 
<br /> 
<table border="2" cellspacing=1 align="center" height="100" width="600"> 
    <tr bgcolor="black"> 
     <th width="20" style="color:white;">Name</th> 
     <th width="20" style="color:white;">Lastname</th> 
    </tr> 

    <tr>  
     <td style="color:white;" id="firstname"> </td> 
     <td style="color:white;" id="firstlastname"> </td> 
    </tr> 

    <tr> 
     <td style="color:white;" id="secondname"> </td> 
     <td style="color:white;" id="secondlastname"> </td> 
    </tr> 
</table> 

내 스크립트

function ajax_post(){ 
    var fn = document.getElementById("first_name").value; 
    var table = document.getElementById("firstname"); 
    table.innerText = fn; 

    var pre = document.getElementById("lastname").value; 
    var table1 = document.getElementById("firstlastname"); 
    table1.innerText = pre; 
} 

I를 두 번째 입력을 둘 필요가

에 표시됩니다 두 번째 입력을 가져 와서 새 셀을 만들지 않고 secondname과 secondlastname에 넣는 방법을 모릅니다!

Answer 1

당신이 갖고있는 것에서 무엇이 필요한지 나는 이것이 당신이 원하는 것을 할 수 있다고 생각합니다.

하지만 jQuery 우리가 한 수 쉬운 방법을 사용할 수 있다면 ... 는

<h1 align="center">INFORMATION</h1> 
Name: <input id="txtFirstname" type="text" size="30"> 
<br /> 
LastName: <input id="txtLastname" type="text" size="30"> 
<br /> 
<button class="okok" name="myBtn" type="submit" value="Submit Data" onClick="ajax_post();">GO </button> 
<br /> 
<table border="2" cellspacing="1" align="center" height="100" width="600"> 
    <tr bgcolor="black"> 
     <th width="20" style="color:white;">Name</th> 
     <th width="20" style="color:white;">Lastname</th> 
    </tr> 

    <tr>  
     <td style="color:red;" id="tdFirstname1"> </td> 
     <td style="color:red;" id="tdLastname1"> </td> 
    </tr> 

    <tr>  
     <td style="color:red;" id="tdFirstname2"> </td> 
     <td style="color:red;" id="tdLastname2"> </td> 
    </tr> 
</table> 

자바 스크립트

HTML

(좀 'IDS'는 코드를 단순화하기 위해 변경)

먼저 JavaScript 변수를 통해 데이터를 쓰고있는 행을 나타내며 1로 설정합니다.

var rowNum = 1; 

한 다음 수정하여 기능을 제공 :

function ajax_post(){ 
    if(rowNum < 3){ 
    var txtFirstname = document.getElementById("txtFirstname").value; 
    var txtLastname = document.getElementById("txtLastname").value; 

    document.getElementById("tdFirstname"+rowNum).innerText = txtFirstname; 
    document.getElementById("tdLastname"+rowNum).innerText = txtLastname; 

    rowNum++; 
    } 
} 

는 또한 작업 바이올린 here