Question

我有一个数据表如下 -

<table class="table" id = "myTable>
    <tr>
      <td> <b> ID </b> </td>
      <td> <b> First Name </b> </td>
      <td> <b> Last Name </b> </td>
    </tr>

我有一个输入表单部分如下 -

<form>
      <input type="text" id ="userID">
      <input type="text" id ="firstname">
      <input type="text" id ="lastname">
      <input type="submit">
</form>

有人可以帮我解决在我的表中添加新行所需的javascript，其中包含从用户输入表单中获取的数据吗？

Answer 1

你不需要jQuery来做到这一点。只需使用javascript。你可以使用这样的函数：

单击提交按钮时具有功能的HTML ..

<table class="table" id = "myTable">
    <tr>
      <td> <b> ID </b> </td>
      <td> <b> First Name </b> </td>
      <td> <b> Last Name </b> </td>
    </tr>
</table>

<form action="">
    <input type="text" id ="userID" />
    <input type="text" id ="firstname" />
    <input type="text" id ="lastname" />
    <input type="submit" onclick="return fillTable();" />
</form>

的JavaScript

function fillTable() {
  var table = document.getElementById("myTable");
  var row = table.insertRow(0);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  cell1.innerHTML = document.getElementById("userID").value;
  cell2.innerHTML = document.getElementById("firstname").value;
  cell3.innerHTML = document.getElementById("lastname").value;
  return false;
}

I've build a JSFiddle for you来说明行为。

使用用户输入附加表行

1 个答案: