输入文本字段到td

Question

Im making a website that the user will put its Name and LastName and it will send the text in the table data . My first inputs is showing in first table data

I need to put the second inputs in the second table data (can someone help me !) lol

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

My script

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 have no idea how to get the second input and put it in secondname and secondlastname without creating a new cell !

Answer 1

OK then, from what you have and what you need I think this can do what you want to do.

But if you could use jQuery then we may had easier ways... (I have changed some 'ids' to simplify the code)

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

First I get a JavaScript variable to indicate which row I'm writing the data and set it to 1:

var rowNum = 1;

and then comes your function with modification:

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++;
  }
}

also you can find a working fiddle here