jquery - 用表单附加 jquery

Question

我正在尝试将我的 jQuery 表单值附加到我在 ‍‍‍‍ <td> 下的表中标签。

但是由于某些原因，它不会在表内追加或发布值。

这是我的 jQuery:

$(document).ready(function(){

  $('form').submit(function(){

    var fname= $('input#form_fname').val(),
        lname = $('input#form_lname').val(),
        email = $('input#form_email').val(),
        phone = $('input#form_phone').val();

    $('tr').append('<td>'.fname.'</td>');

   });
});

这是 JSFIDDLE:https://jsfiddle.net/zbb6fqtc/

有什么想法吗？

Answer 1

有两个问题。

1. 在 JavaScript 中，您应该使用 + 进行字符串连接运算符不. .

2. 您不会阻止事件的默认操作。页面已提交/刷新，您看不到附加元素。

   $('form').submit(function(event) {
       event.preventDefault();
       var fname= $('input#form_fname').val();
       // ...
       $('tr').append('<td>' + fname + '</td>');
   });
   

$('tr').append('<td>' + fname + '</td>'); ->>>>>this part is messing up the table. Any idea why?

您的标记无效。你应该包装 th带有 tr 的元素元素。浏览器通常会修复标记。所以 $('tr')元素选择 tr thead 的 child 元素。您应该使用更具体的选择器来选择 tr tbody 的 child 元素。类似于 $('tbody tr')或 $('tr').eq(1) .

Is there a better option to append this?

我会将空单元格添加到 tr元素并使用 input 填充单元格值(value)观。

<table border="1">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email Address</th>
            <th>Contact #</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

JavaScript:

$('form').submit(function (event) {
    event.preventDefault();
    var $td = $('tbody tr td');
    $('input', this).each(function (i) {
        $td.eq(i).text(this.value);
    });
});

https://jsfiddle.net/zbb6fqtc/9/