在表中创建带有输入的新行，然后单击保存该输入的值

Create new row with inputs in table and onclick save the value of this inputs

本文关键字：输入 单击 然后 保存 新行 创建      更新时间：2023-11-08

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

我想在每次单击"new_customer"时创建新行，并在每次单击保存时保存新数据。我只是一个初学者，我知道我的代码很糟糕）我会很高兴有任何想法。我如何用上面的方法做到这一点？感谢

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

在添加新行按钮上添加此代码，并为保存数据编写代码

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

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

参考和工作示例

相关文章：