Bootstrap将行添加到表中

我试图动态添加行到我的表。 出于某种原因，当我向表中添加一行时，它会全部被压缩，并且不会跨越整行。 为什么会发生这种情况，我该如何解决？

这是我的文件，如果你想运行它，看看我的意思

jQuery的：

$(document).ready(function () { $('.close').on('click', function (e) { e.preventDefault(); $(this).parent().parent().remove(); }); $('#submit').click(function () { var name = $('input[name=name]').val(); var phone = $('input[name=phone]').val(); var email = $('input[name=email]').val(); var tr = "\ \ " + name + " \ \ 
\ 
\ X\ 
 " + name + "
\ >
Phone: " + phone + "
\ 
email: " + email + "
\ 
\ 
\ \  \ In
\ Out\ \ \ ×Close\ \ \ ;"; $('#table').append(tr); $("input[type=text]").val(""); $("input[type=tel]").val(""); $("input[type=email]").val(""); }); }); 

还有我的HTML

         <link href="css/bootstrap.min.css" rel="stylesheet"   
 
Add An Employee
 
 Name: 
 Phone Number: 
 E-Mail: 
  
 
  
 
 
 
People In the Office
 
 
  
 
Name
 
IN/OUT Status
 
Optional Note
 
 
 
 Peter Griffin 
 
 X 
Peter Griffin
 
Phone:[phone].
 
email: [e-mail]
 
 
 
 
 In
 Out 
 
 ×Close  
 
 
 
 
       

http://jsfiddle.net/36Qzy/

Answer 1

您将新表行直接附加到

– 具有id table的那一行。 相反，你应该追加它，可能是在

的末尾。 您可以使用后代选择器 ; 更改$('#submit').click()的append(tr)行$('#submit').click()处理程序到以下内容：

 $('#table tbody').append(tr); 

Answer 2

更改

 $('#table').append(tr); 

至

 $('#table table').append(tr); 

你的表的id是在div而不是表本身，所以它将tr元素附加到div＃表而不是表本身