Question

HTML：

<tbody>
    <tr id="hiddenRow">
        <td>
            <button id="saveBtn" class="btn btn-success btn-xs">save</button>
        </td>
        <td id="firstName">
            <input id="first" type="text" placeholder="first name" name="first_name" />
        </td>
        <td id="lastName">
            <input id="last" type="text" placeholder="last name" name="last_name" />
        </td>
        <td id="date">
            <input id="dateOf" type="text" placeholder="date of birth" name="date_of_birth" />
        </td>
        <td id="address">
            <input id="addres" type="text" placeholder="address" name="address" />
        </td>
        <td id="phone">
            <input id="phonenumber" type="text" placeholder="phone" name="phone" />
        </td>
        <td id="email">
            <input id="mail" type="text" placeholder="email" name="email" />
        </td>
        <td id="left">
            <input id="leftEye" type="text" placeholder="left eye" name="left_eye" />
        </td>
        <td id="right">
            <input id="rightEye" type="text" placeholder="right eye" name="right_eye" />
        </td>
    </tr>
</tbody>

JS：

$('.new_customer').click(function () {
      $("#hiddenRow").show();
      $("#saveBtn").click((function () {
          var firstval = $("#first").val(),
              lastval = $("#last").val(),
              dateval = $("#dateOf").val(),
              addressval = $("#addres").val(),
              phoneval = $("#phonenumber").val(),
              emailval = $("#mail").val(),
              leftval = $("#leftEye").val(),
              rightval = $("#rightEye").val();
          $("#firstName").text(firstval);
          $("#lastName").text(lastval);
          $("#date").text(dateval);
          $("#address").text(addressval);
          $("#phone").text(phoneval);
          $("#email").text(emailval);
          $("#left").text(leftval);
          $("#right").text(rightval);
      }));

以下是Fiddle

每次点击＆＃34; new_customer＆＃34;我想创建新行每次保存新数据点击保存。我只是一个初学者，我的代码很糟糕，我知道）我会很高兴任何想法。我怎么能用上面的方法呢？谢谢

Answer 1

我想这是你想要的一个例子：

   <!DOCTYPE html>
    <html>
    <head>
    <style>
    table, td {
        border: 1px solid black;
    }
    </style>
    </head>
    <body>

    <p>Click the button to add a new row at the first position of the table and then add cells and content.</p>

    <table id="myTable">
      <tr>
        <td>Row1 cell1</td>
        <td>Row1 cell2</td>
      </tr>
      <tr>
        <td>Row2 cell1</td>
        <td>Row2 cell2</td>
      </tr>
      <tr>
        <td>Row3 cell1</td>
        <td>Row3 cell2</td>
      </tr>
    </table>
    <br>

    <button onclick="myFunction()">Try it</button>

    <script>
    function myFunction() {
        var table = document.getElementById("myTable");
        var row = table.insertRow(0);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        cell1.innerHTML = "NEW CELL1";
        cell2.innerHTML = "NEW CELL2";
    }
    </script>

    </body>
    </html>

Reference and working example

Answer 2

var new_row='<tr>
    <td>
        <button id="saveBtn" class="btn btn-success btn-xs">save</button>
    </td>
    <td id="firstName">
        <input id="first" type="text" placeholder="first name" name="first_name" />
    </td>
    <td id="lastName">
        <input id="last" type="text" placeholder="last name" name="last_name" />
    </td>
    <td id="date">
        <input id="dateOf" type="text" placeholder="date of birth" name="date_of_birth" />
    </td>
    <td id="address">
        <input id="addres" type="text" placeholder="address" name="address" />
    </td>
    <td id="phone">
        <input id="phonenumber" type="text" placeholder="phone" name="phone" />
    </td>
    <td id="email">
        <input id="mail" type="text" placeholder="email" name="email" />
    </td>
    <td id="left">
        <input id="leftEye" type="text" placeholder="left eye" name="left_eye" />
    </td>
    <td id="right">
        <input id="rightEye" type="text" placeholder="right eye" name="right_eye" />
    </td>
</tr>';

$("#hiddenRow tbody tr:last").after(new_row);

在添加新行按钮和编写保存数据代码

时添加此代码

使用表格中的输入创建新行并单击以保存此输入的值

2 个答案: