TextInput sende text in new td

Question

Ich mache eine Website, die der Benutzer wird (Name, Nachname, Geschlecht, Alter) und es wird den Text in den Tabellendaten senden. Meine erste Eingänge wird in der ersten Tabellenzeile zeigt

ich die zweiten Eingänge in der zweiten Tabellenzeile setzen müssen (kann mir jemand helfen!) Lol

       <h1 align=center>INFORMATION</h1> 
      Name: <input id="first_name" size="30" type="text" action="document.getElementById(f1)"> 

      LastName: <input type="text" size="30" id="lastname"> 

      Age:<input type="text" size="30" id="age"> 

      Gender: <input type="text" size="30" id="gender">    


      <button class="okok" name="myBtn" type="submit" value="Submit Data" onClick="ajax_post();">COMPUTE </button> 



<table bgcolor ="black" border="2" cellspacing=1 align=center height="100" width="600"> 
<br> 

<tr bgcolor = "black"> 

<th width=20 style="color:white;">Name</th> 
<th width=20 style="color:white;">Lastname</th> 
<th width=20 style="color:white;">Age</th> 
<th width=20 style="color:white;">Gender</th> 

</tr> 
<tr>  

<td style="color:white;" id=f1 > </td> 
<td style="color:white;" id="no1"> </td> 
<td style="color:white;" id="no2"> </td> 
<td style="color:white;" id="no3" > </td> 

</tr> 


<tr> 
<td style="color:white;" id="secondtd1"> </td> 
<td style="color:white;" id="secondtd2"> </td> 
<td style="color:white;" id="secondtd3"> </td> 
<td style="color:white;" id="secondtd4"> </td> 

<td> </td> 
</tr> 


</font> 



</table> 

Mein Skript

<script> 
    function ajax_post(){ 

     var fn = document.getElementById("first_name").value; 
     var table = document.getElementById("f1"); 
     table.innerText = fn; 





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

     var mid = document.getElementById("age").value; 
     var table2 = document.getElementById("no2"); 
     table2.innerText = mid; 

     var fil = document.getElementById("gender").value; 
     var table3 = document.getElementById("no3"); 
     table3.innerText = fil; 

} 
</script> 

Ich habe keine Ahnung, wie man das macht .. :(

Answer 1

Wenn Sie ein Beispiel in plain Javascript suchen, hier gehen Sie. Es verwendet Javascript insertRow und insertCell.

Bitte beachten Sie, dass dies noch kein "ajax_post" ist, Sie müssen noch eine tatsächliche Serveranfrage hinzufügen. Sie könnten auch in Javascript-Frameworks suchen, die dies und mehr auf eine sauberere Weise behandeln.

function ajax_post(e) { 
 
    // Prevent the form from actually submitting this. 
 
    e.preventDefault(); 
 

 
    // Save all elements/values we need later in convenient variables. 
 
    var table = document.getElementById("table"); 
 
    var firstname = document.getElementById("first_name").value; 
 
    var lastname = document.getElementById("lastname").value; 
 
    var age = document.getElementById("age").value; 
 
    var gender = document.getElementById("gender").value; 
 

 
    // Insert a new row into our table at the position -1 (bottom). 
 
    var row = table.insertRow(-1); 
 
    
 
    // Insert 4 empty cells. 
 
    var cell_firstname = row.insertCell(0); 
 
    var cell_lastname = row.insertCell(1); 
 
    var cell_age = row.insertCell(2); 
 
    var cell_gender = row.insertCell(3); 
 
    
 
    // Fill the empty cells with the data from the form. 
 
    cell_firstname.innerHTML = firstname; 
 
    cell_lastname.innerHTML = lastname; 
 
    cell_age.innerHTML = age; 
 
    cell_gender.innerHTML = gender; 
 
}

<h1>INFORMATION</h1> 
 

 
<form> 
 
    Name: <input id="first_name" type="text"><br> 
 
    LastName: <input type="text" id="lastname"><br> 
 
    Age: <input type="text" id="age"><br> 
 
    Gender: <input type="text" id="gender"><br> 
 
    <input type="submit" value="Compute" onclick="ajax_post(event)"> 
 
</form> 
 
<br> 
 

 
<table bgcolor="black" style="color: white;" border="2" width="100%" id="table"> 
 
    <tr> 
 
    <th>Name</th> 
 
    <th>Lastname</th> 
 
    <th>Age</th> 
 
    <th>Gender</th> 
 
    </tr> 
 
    <tr> 
 
    <td>André</th> 
 
    <td>Eric</td> 
 
    <td>33</td> 
 
    <td>Male</td> 
 
    </tr> 
 
</table>