Введите текстовое поле в td

Question

Я создаю веб-сайт, на котором пользователь поместит свое имя и LastName, и он отправит текст в данные таблицы. Мои первые входы показывают в первых данных таблицы

мне нужно поставить вторые входы во втором табличных данных (может кто-то помочь мне!) Лол

<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 не знаю, как получить второй вход и поместить его во второе имя и второе имя, не создавая новую ячейку!

Answer 1

ОК, то, что у вас есть и что вам нужно, я думаю, что это может делать то, что вы хотите сделать.

Но если вы могли бы использовать jQuery тогда мы имели более простые способы ... (я изменил некоторые 'иды' для упрощения кода)

HTML

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

JavaScript

Сначала я получаю переменную 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