我正在尝试向表中添加一行并将该行滑入视图,但是slidedown函数似乎是在表格行中添加了一个显示:块样式,这会混淆布局.
任何想法如何解决这个问题？
这是代码:
$.get('/some_url',
{ 'val1': id },
function (data) {
var row = $('#detailed_edit_row');
row.hide();
row.html(data);
row.slideDown(1000);
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
<a for="collapseOne" data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" class="btn btn-primary">+ addInfo </a>
<textarea class="form-control collapse" id="collapseOne" rows="4"></textarea>
</div>
<div class="form-group">
<a for="collapseTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="true" aria-controls="collapseOne" class="btn btn-info">+ subtitle </a>
<input type="text" class="form-control collapse" id="collapseTwo">
</div>问题是当单击addInfo选项卡时,您可以在扩展中找到跳转text_area,即动画不平滑.
我在JavaScript的帮助下呈现HTML表。我已经成功地制作了表格，但是现在我有一个要求可以连续显示一些新数据，例如单击“展开”行
表功能：
在我的代码中，我注释了所有行，我在那一行中正在做什么
我面临的问题
tbody作为GRN entery品牌的睿智但造成问题的我创建了两个代码段，一个是完整的静态HTML，就像我想要的那样，另一个是显示我的工作。
我在Google上找到的帮助
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<table class="table table-responsive table-hover table-bordered">
<thead>
<tr>
<th> Brand Name</th>
<th colspan="2">Total</th>
<th colspan="2">Jayanagar</th>
<th colspan="2">Malleshwaram</th>
<th colspan="2">Kolar</th>
</tr>
<tr>
<th></th>
<th>Grn Entery</th>
<th>Sales</th>
<th>Grn Entery</th>
<th>Sales</th>
<th>Grn Entery</th>
<th>Sales</th>
<th>Grn Entery</th>
<th>Sales</th>
</tr>
<tr>
<th>Total</th>
<th>1,97,445</th>
<th>6,83,880</th>
<th>1,97,445</th>
<th>4,76,426</th>
<th>0</th>
<th>1,15,313</th>
<th>0</th>
<th>92,141</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="clickable" data-toggle="collapse" id="row1" …当我点击父行时,我试图让几行折叠.目前,我只能折叠一行,但我需要能够同时关闭+2行.
下面是我当前的代码,在这段代码中,当我点击第一行时,我无法弄清楚如何折叠"HIDDEN"和"HIDDEN 2"行.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<style>
.hiddenRow {
padding: 0 !important;
}
</style>
<div id="accordion" role="tablist" aria-multiselectable="true">
<table class="table">
<tr id="main" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<td>
test
</td>
</tr>
<tr>
<td class="hiddenRow">
<div id="collapseOne" class="collapse in" aria-labelledby="headingOne">HIDDEN</div>
</td>
</tr>
<tr>
<td class="hiddenRow">
<div id="collapseTwo" class="collapse in" aria-labelledby="headingTwo">HIDDEN 2</div>
</td>
</tr>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>