获取 Input 的值并将值插入到<td>

Question

当我按下按钮时，来自input的数据不会在<td>内传输。(tabios(名称必须根据输入的值进行更改，我已经在我的帖子中包含该片段。提前感谢您的回答和评论

$('buttonnext').click(function() {
  // var date_id = $(this).attr("id");
  var lastname = $('#lastname').val();
  var firstname = $('#firstname').val();
  var email = $('#email').val();
  $('#datalastname').val(lastname);
  $('#datafirstname').val(firstname);
  $('#dataemail').val(email);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<br><br> 
Lastname <input type="text" name="" style="width: 250px;" id="lastname"><br><br> 
Firstname <input type="text" name="" style="width: 250px;" id="firstname"><br><br> 
Email <input type="text" name="" style="width: 250px;" id="email"><br><br>
<button class="btn btn-success" style="width: 250px;" class="buttonnext">Next</button><br><br>
<table class="table table-bordered" style="border-style: solid;">
  <tbody>
    <tr>
      <td>Lastname</td>
      <td id="datalastname">Tabios</td>
    </tr>
    <tr>
      <td>Firstname</td>
      <td id="datafirstname">Jimmy</td>
    </tr>
    <tr>
      <td>Email</td>
      <td id="dataemail">[e-mail]</td>
    </tr>
  </tbody>
</table>

Answer 1

试试这段代码，它正在工作。 要更改文本，您可以使用$('#datalastname').text(lastname); 也 <button class="btn btn-success" style="width: 250px;" class="buttonnext">Next</button><br><br>

上面的代码包含 2 个class=""标签。

$('.buttonnext').click(function() {
  // var date_id = $(this).attr("id");
  var lastname = $('#lastname').val();
  var firstname = $('#firstname').val();
  var email = $('#email').val();
  $('#datalastname').text(lastname);
  $('#datafirstname').text(firstname);
  $('#dataemail').text(email);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<br><br> 
Lastname <input type="text" name="" style="width: 250px;" id="lastname"><br><br> 
Firstname <input type="text" name="" style="width: 250px;" id="firstname"><br><br> 
Email <input type="text" name="" style="width: 250px;" id="email"><br><br>
<button class="btn btn-success buttonnext" style="width: 250px;">Next</button><br><br>
<table class="table table-bordered" style="border-style: solid;">
  <tbody>
    <tr>
      <td>Lastname</td>
      <td id="datalastname">Tabios</td>
    </tr>
    <tr>
      <td>Firstname</td>
      <td id="datafirstname">Jimmy</td>
    </tr>
    <tr>
      <td>Email</td>
      <td id="dataemail">[e-mail]</td>
    </tr>
  </tbody>
</table>

Answer 2

你忘了添加点，因为它是类。要选择具有特定类的元素，请写一个句点 ( . ( 字符，后跟类的名称，因此选择器将被$('.buttonnext')

$('.buttonnext').click(function() {
  // var date_id = $(this).attr("id");
  var lastname = $('#lastname').val();
  var firstname = $('#firstname').val();
  var email = $('#email').val();
  $('#datalastname').val(lastname);
  $('#datafirstname').val(firstname);
  $('#dataemail').val(email);
});

Answer 3

要替换 td 文本，请使用 text(( 而不是 val((。检查更新的代码：

$('.buttonnext').click(function() {
  // var date_id = $(this).attr("id");
  var lastname = $('#lastname').val();
  var firstname = $('#firstname').val();
  var email = $('#email').val();
  $('#datalastname').text(lastname);
  $('#datafirstname').text(firstname);
  $('#dataemail').text(email);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<br><br> 
Lastname <input type="text" name="" style="width: 250px;" id="lastname"><br><br> 
Firstname <input type="text" name="" style="width: 250px;" id="firstname"><br><br> 
Email <input type="text" name="" style="width: 250px;" id="email"><br><br>
<button class="btn btn-success buttonnext" style="width: 250px;">Next</button><br><br>
<table class="table table-bordered" style="border-style: solid;">
  <tbody>
    <tr>
      <td>Lastname</td>
      <td id="datalastname">Tabios</td>
    </tr>
    <tr>
      <td>Firstname</td>
      <td id="datafirstname">Jimmy</td>
    </tr>
    <tr>
      <td>Email</td>
      <td id="dataemail">[e-mail]</td>
    </tr>
  </tbody>
</table>