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">Johndoe@gmail.com</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">Johndoe@gmail.com</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">Johndoe@gmail.com</td>
    </tr>
  </tbody>
</table>

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

3 个答案: