javascript - 输入文本字段到 td

Question

我正在创建一个网站，用户将输入其名称和姓氏，然后将文本发送到表数据中。我的第一个输入显示在第一个表数据中

我需要将第二个输入放入第二个表数据中(有人可以帮助我吗!)哈哈

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

我不知道如何获取第二个输入并将其放入 secondaryname 和 secondarylastname 中而不创建新单元格!

Answer 1

好吧，从你所拥有的和你需要的来看，我认为这可以做你想做的事。

但是如果你可以使用 jQuery 那么我们可能有更简单的方法...... (我更改了一些“id”以简化代码)

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

您还可以找到一个可用的 fiddle here