Question

我正在创建一个用户将其（名称，姓氏，性别，年龄）放入其中的网站，它将在表格数据中发送文本。我的第一个输入显示在第一个表格行

中

我需要将第二个输入放在第二个表格行中（有人可以帮助我！）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>

我的剧本

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

我不知道该怎么做.. :(

Answer 1

如果您正在寻找普通Javascript中的示例，请转到此处。它使用Javascript的insertRow和insertCell。

请记住，这不是“ajax_post”，您仍需要添加实际的服务器请求。您可能还希望以更清洁的方式研究处理此问题的Javascript框架。

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>

TextInput在新td中发送文本

1 个答案: