jQuery Bootstrap 向表中添加行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24615850/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap adding rows to a table
提问by user3771865
I am trying to dynamically add rows to my table. For some reason, when I add a row to the table, it comes in all scrunched up and does not span across the full row. Why does this happen, and how do i fix it?
Here are my files if you want to run it and see what I mean
我正在尝试将行动态添加到我的表中。出于某种原因，当我向表中添加一行时，它全部被压缩并且没有跨越整行。为什么会发生这种情况，我该如何解决？
如果你想运行它，看看我的意思，这是我的文件
jQuery:
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 = "<tr>\
<td>\
<a href=\"#" + name + "openModal\">" + name + " </a>\
\
<div id=\"" + name + "openModal\" class=\"modalDialog\">\
<div>\
<a href=\"#close\" title=\"Close\" class=\"close\">X</a>\
<h2> " + name + "</h2>\
><p>Phone: " + phone + "</p>\
<p>email: " + email + "</p>\
</div>\
</div>\
</td>\
<td> \
<input type='radio' name=\"" + name + "present\">In<br>\
<input type='radio' name=\"" + name + "present\">Out\
</td>\
<td>\
<button type=\"button\" class=\"close\"><span aria-hidden=\"true\">×</span><span class=\"sr-only\">Close</span></button>\
<textarea placeholder=\"Optional Note about where your are or your schedule\"></textarea>\
</td>\
</tr>;";
$('#table').append(tr);
$("input[type=text]").val("");
$("input[type=tel]").val("");
$("input[type=email]").val("");
});
});
And my HTML
还有我的 HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>iSignout</title>
<link type="text/css" rel="stylesheet" href="bootstrapCSS.css"/>
<link href="css/bootstrap.min.css" rel="stylesheet"
</head>
<body>
<div id="left">
<h3 id=add>Add An Employee</h3>
<form class="input">
Name: <input type="text" name="name"><br>
Phone Number: <input type="tel" name="phone"><br>
E-Mail: <input type="email" name="email"><br>
<input type="button" value="Add" id="submit" />
</form>
</div>
<!--Creates the tables with employees -->
<div id='table'>
<table class= 'table table-hover'>
<thead>
<tr id="title"><th colspan=3>People In the Office</th></tr>
</thead>
<tbody>
<!--Create rows here -->
<tr>
<th>Name</th>
<th class>IN/OUT Status</th>
<th>Optional Note</th>
</tr>
<tr>
<td>
<a href="#openModal">Peter Griffin</a>
<div id="openModal" class="modalDialog">
<div>
<a href="#close" title="Close" class="close">X</a>
<h2>Peter Griffin</h2>
<p>Phone:123-456-7890.</p>
<p>email: [email protected]</p>
</div>
</div>
</td>
<td>
<input type='radio' name="Peterpresent">In<br>
<input type='radio' name="Peterpresent">Out
</td>
<td>
<button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<textarea placeholder="Optional Note about where your are or your schedule"></textarea>
</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="bootstrap_script.js"></script>
</body>
</html>
回答by Alex P
You're appending your new table row straight inside your <div>- the one with the id table. Instead, you should append it, probably at the end of your <tbody>. You can use a descendant selectorfor this; change your append(tr)line in your $('#submit').click()handler to the following:
您将新表格行直接附加到您的<div>- 带有 id 的行中table。相反，您应该附加它，可能在您的<tbody>. 您可以为此使用后代选择器；append(tr)将$('#submit').click()处理程序中的行更改为以下内容：
$('#table tbody').append(tr);
回答by Erik
change
改变
$('#table').append(tr);
to
到
$('#table table').append(tr);
your id of table is on the div and not on the table itself so it is appending the tr element to the div#table and not the table itself
您的表的 id 在 div 上而不是在表本身上，因此它将 tr 元素附加到 div#table 而不是表本身
