Question

我创建了一个用户将其名称和姓氏放在网站上的网站，它将在表格数据中发送文本。我的第一个输入是在第一个表数据中显示

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

我的剧本

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

我不知道如何获取第二个输入并将其放入secondname和secondlastname而不创建新单元格！

Answer 1

那么，根据你拥有的和你需要的东西，我认为这可以做你想做的事。

但是如果你可以使用jQuery那么我们可能会有更简单的方法...... （我已经更改了一些＆＃39;以简化代码）

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

输入文本字段为td

1 个答案: