追加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

有2個問題。

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>'); - >>>>>這部分是搞亂表。任何想法爲什麼？

您的標記無效。您應該用tr元素包裝th元素。瀏覽器通常會修復標記。因此，$('tr')元素選擇thead元素的tr子元素。您應該使用更具體的選擇器來選擇tbody元素的tr孩子。像$('tbody tr')或$('tr').eq(1)。

有更好的選擇來追加這個嗎？

我會將空單元格添加到tr元素並使用input值填充單元格。

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

Answer 2

更改按鈕類型提交按鈕。

 <p> 
      <input type="button" id="bnSubmit" value="Add User" /> 
     </p> 

寫您的jQuery的按鈕，點擊事件代碼：

$(document).ready(function(){ 

    $("#bnSubmit").click(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>'); 

    }); 

}); 

注：替換 「」用「+」 - > $（'tr'）。append（''+ fname +''）;

https://jsfiddle.net/zbb6fqtc/5/

Answer 3

在你的JS，固定的，只是小問題，測試和工程100％...代碼如下

1）字符串連接問題，它的「+」爲js和「。」。對於PHP
2）添加event.preventdefault（），以防止默認提交

 

    <script> 
     $(document).ready(function(event){ 

      $('form').submit(function(event){ 
       event.preventDefault(); 
       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>'); 

      }); 
     }); 

    </script> 

Answer 4

那麼你一定要防止提交第一。

$('form').submit(function(e){ 
    e.preventDefault(); //Prevent submit 

}); 

，也許，如果你想添加多個TR到表也許你需要使用另一個選擇這樣

$('table tbody').append('<tr><td>'+fname+'</td> <td>'+lname+' </tr>');