Bootstrap将行添加到表中 [英] Bootstrap adding rows to a table
本文介绍了Bootstrap将行添加到表中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图动态添加行到我的表中。出于某种原因，当我在表中添加一行时，它会全部缩小并且不会跨越整行。为什么会发生这种情况，我该如何解决这个问题？
如果你想运行它并查看我的意思，那么这里是我的文件
jQuery：
$（document）.ready（function（）{
$ b $（'。close'） .on（'click'，function（e）{
e.preventDefault（）;
$（this）.parent（）。parent（）。remove（）;
}）;
$ b $（'＃submit'）。click（function（）{
var name = $（'input [name = name]'）。val（）;
var 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 +< / p> \
< p> < / p> \
< / div> \
< / div> \
< / td> \
< td> \
< input type ='radio'name = \+ name +present\>在< br> \
< input type ='radio'name = \+ name +present\> Out \
< / td> \
< td> \
< button type = \ < / span>< span class = \ sr-button&只有\>关闭< / span>< /按钮> \
< / td> \
< / tr> ;;;
$（'＃table'）。append（tr）;
$ （input [type = text]）。val（）;
$（input [type = tel]）。val（）;
$（input [type =电子邮件]）。val（）;
}）;
}）;
而我的HTML
<！DOCTYPE html>
< html lang =en>
< head>
< meta charset =utf-8>
< meta http-equiv =X-UA-Compatiblecontent =IE = edge>
< meta name =viewportcontent =width = device-width，initial-scale = 1>
< title> iSignout< / title>
< link type =text / css =stylesheethref =bootstrapCSS.css/>
< link href =css / bootstrap.min.css =stylesheet
< / head>
< body>
< div id =left>
< h3 id = add>添加员工< / h3>
< form class =input>
名称：< input type =textname =name>< br>
电话号码：< input type =telname =phone>< br>
电子邮件：< input type =emailname =email>< br>
< input type =buttonvalue =Addid =submit/>
< / form>
< / div>
<！ - 用员工创建表 - >
< div id ='table'>
< table class ='table table-hover'>
< thead>
< tr id =title>< th colspan = 3>人员在办公室< / tr>< / tr>
< / thead>
< tbody>
<！ - 在此处创建行 - >
< tr>
< th>名称< / th>
IN / OUT Status< / th>
th可选注意< / th>
< / tr>
< tr>
< td>
< a href =＃openModal>彼得格里芬< / a>
< div id =openModalclass =modalDialog>
< div>
< a href =＃closetitle =Closeclass =close> X< / a>
< h2> Peter Griffin< / h2>
< p>电话：123-456-7890。< / p>
< p>电子邮件：petergriffin@gmail.com< / p>
< / div>
< / div>
< / td>
< td>
< input type ='radio'name =Peterpresent>在< br>
< input type ='radio'name =Peterpresent> Out
< / td>
< td>
< / 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>
解决方案您将新的表格行直接追加到内部您的< div> - ID为表格的表格。相反，你应该追加它，可能在你的< tbody> 的最后。您可以使用后代选择器进行此操作;将您的 $（'＃submit'）。click（）处理程序中的 append（tr）行更改为以下：
$（'＃table tbody'）。append（tr）;
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:
$(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
<!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: petergriffin@gmail.com</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>
解决方案 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 selector for this; change your append(tr) line in your $('#submit').click() handler to the following:
$('#table tbody').append(tr);
这篇关于Bootstrap将行添加到表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆