我试图添加一行到一个表，并有一行滑进视图，但滑动功能似乎是添加一个显示:块样式的表行，这打乱了布局。
有什么解决办法吗?
代码如下:
$.get('/some_url',
{ 'val1': id },
function (data) {
var row = $('#detailed_edit_row');
row.hide();
row.html(data);
row.slideDown(1000);
}
);
当前回答
我回答这个问题有点落后了，但我找到了一种方法来做到这一点:)
function eventinfo(id) {
tr = document.getElementById("ei"+id);
div = document.getElementById("d"+id);
if (tr.style.display == "none") {
tr.style.display="table-row";
$(div).slideDown('fast');
} else {
$(div).slideUp('fast');
setTimeout(function(){tr.style.display="none";}, 200);
}
}
我只是在表格数据标记中放了一个div元素。当它被设置为可见时，随着div展开，整行就会下降。 然后告诉它渐隐(然后超时，以便您看到效果)，然后再次隐藏表行:)
希望这能帮助到一些人!
其他回答
如果你把行中的td设置为不显示就可以了同时你开始动画行的高度
tbody tr{
min-height: 50px;
}
tbody tr.ng-hide td{
display: none;
}
tr.hide-line{
-moz-transition: .4s linear all;
-o-transition: .4s linear all;
-webkit-transition: .4s linear all;
transition: .4s linear all;
height: 50px;
overflow: hidden;
&.ng-hide { //angularJs specific
height: 0;
min-height: 0;
}
}
这段代码有效!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<title></title>
<script>
function addRow() {
$('.displaynone').show();
$('.displaynone td')
.wrapInner('<div class="innerDiv" style="height:0" />');
$('div').animate({"height":"20px"});
}
</script>
<style>
.mycolumn{border: 1px solid black;}
.displaynone{display: none;}
</style>
</head>
<body>
<table align="center" width="50%">
<tr>
<td class="mycolumn">Row 1</td>
</tr>
<tr>
<td class="mycolumn">Row 2</td>
</tr>
<tr class="displaynone">
<td class="mycolumn">Row 3</td>
</tr>
<tr>
<td class="mycolumn">Row 4</td>
</tr>
</table>
<br>
<button onclick="addRow();">add</button>
</body>
</html>
我对所有其他的解决方案都有问题，但最后还是做了这个简单的事情，非常顺利。
像这样设置你的HTML:
<tr id=row1 style='height:0px'><td>
<div id=div1 style='display:none'>
Hidden row content goes here
</div>
</td></tr>
然后像这样设置你的javascript:
function toggleRow(rowid){
var row = document.getElementById("row" + rowid)
if(row.style.height == "0px"){
$('#div' + rowid).slideDown('fast');
row.style.height = "1px";
}else{
$('#div' + rowid).slideUp('fast');
row.style.height = "0px";
}
}
基本上，让“隐形”行高0px，里面有一个div。 使用div(不是行)上的动画，然后设置行高为1px。
为了再次隐藏行，在div上使用相反的动画，并将行高设置为0px。
这是我为此编写的一个插件，它从Fletch的实现中获得了一些，但我的插件仅用于上下滑动一行(不插入行)。
(function($) {
var sR = {
defaults: {
slideSpeed: 400,
easing: false,
callback: false
},
thisCallArgs: {
slideSpeed: 400,
easing: false,
callback: false
},
methods: {
up: function (arg1,arg2,arg3) {
if(typeof arg1 == 'object') {
for(p in arg1) {
sR.thisCallArgs.eval(p) = arg1[p];
}
}else if(typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')) {
sR.thisCallArgs.slideSpeed = arg1;
}else{
sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
}
if(typeof arg2 == 'string'){
sR.thisCallArgs.easing = arg2;
}else if(typeof arg2 == 'function'){
sR.thisCallArgs.callback = arg2;
}else if(typeof arg2 == 'undefined') {
sR.thisCallArgs.easing = sR.defaults.easing;
}
if(typeof arg3 == 'function') {
sR.thisCallArgs.callback = arg3;
}else if(typeof arg3 == 'undefined' && typeof arg2 != 'function'){
sR.thisCallArgs.callback = sR.defaults.callback;
}
var $cells = $(this).find('td');
$cells.wrapInner('<div class="slideRowUp" />');
var currentPadding = $cells.css('padding');
$cellContentWrappers = $(this).find('.slideRowUp');
$cellContentWrappers.slideUp(sR.thisCallArgs.slideSpeed,sR.thisCallArgs.easing).parent().animate({
paddingTop: '0px',
paddingBottom: '0px'},{
complete: function () {
$(this).children('.slideRowUp').replaceWith($(this).children('.slideRowUp').contents());
$(this).parent().css({'display':'none'});
$(this).css({'padding': currentPadding});
}});
var wait = setInterval(function () {
if($cellContentWrappers.is(':animated') === false) {
clearInterval(wait);
if(typeof sR.thisCallArgs.callback == 'function') {
sR.thisCallArgs.callback.call(this);
}
}
}, 100);
return $(this);
},
down: function (arg1,arg2,arg3) {
if(typeof arg1 == 'object') {
for(p in arg1) {
sR.thisCallArgs.eval(p) = arg1[p];
}
}else if(typeof arg1 != 'undefined' && (typeof arg1 == 'number' || arg1 == 'slow' || arg1 == 'fast')) {
sR.thisCallArgs.slideSpeed = arg1;
}else{
sR.thisCallArgs.slideSpeed = sR.defaults.slideSpeed;
}
if(typeof arg2 == 'string'){
sR.thisCallArgs.easing = arg2;
}else if(typeof arg2 == 'function'){
sR.thisCallArgs.callback = arg2;
}else if(typeof arg2 == 'undefined') {
sR.thisCallArgs.easing = sR.defaults.easing;
}
if(typeof arg3 == 'function') {
sR.thisCallArgs.callback = arg3;
}else if(typeof arg3 == 'undefined' && typeof arg2 != 'function'){
sR.thisCallArgs.callback = sR.defaults.callback;
}
var $cells = $(this).find('td');
$cells.wrapInner('<div class="slideRowDown" style="display:none;" />');
$cellContentWrappers = $cells.find('.slideRowDown');
$(this).show();
$cellContentWrappers.slideDown(sR.thisCallArgs.slideSpeed, sR.thisCallArgs.easing, function() { $(this).replaceWith( $(this).contents()); });
var wait = setInterval(function () {
if($cellContentWrappers.is(':animated') === false) {
clearInterval(wait);
if(typeof sR.thisCallArgs.callback == 'function') {
sR.thisCallArgs.callback.call(this);
}
}
}, 100);
return $(this);
}
}
};
$.fn.slideRow = function(method,arg1,arg2,arg3) {
if(typeof method != 'undefined') {
if(sR.methods[method]) {
return sR.methods[method].apply(this, Array.prototype.slice.call(arguments,1));
}
}
};
})(jQuery);
基本用法:
$('#row_id').slideRow('down');
$('#row_id').slideRow('up');
将幻灯片选项作为单独的参数传递:
$('#row_id').slideRow('down', 500); //slide speed
$('#row_id').slideRow('down', 500, function() { alert('Row available'); }); // slide speed and callback function
$('#row_id').slideRow('down', 500, 'linear', function() { alert('Row available'); }); slide speed, easing option and callback function
$('#row_id').slideRow('down', {slideSpeed: 500, easing: 'linear', callback: function() { alert('Row available');} }); //options passed as object
基本上，对于向下滑动动画，插件将单元格的内容包装在div中，对它们进行动画化，然后删除它们，对于向上滑动亦然(使用一些额外的步骤来消除单元格填充)。它还返回你调用它的对象，所以你可以像这样链接方法:
$('#row_id').slideRow('down').css({'font-color':'#F00'}); //make the text in the row red
希望这能帮助到一些人。
我需要一个表与隐藏的行，滑进和退出对行单击视图。
$('.tr-show-sub').click(function(e) { var elOne = $(this); $('.tr-show-sub').each(function(key, value) { var elTwoe = $(this); if(elOne.get(0) !== elTwoe.get(0)) { if($(this).next('.tr-sub').hasClass('tr-sub-shown')) { elTwoe.next('.tr-sub').removeClass('tr-sub-shown'); elTwoe.next('tr').find('td').find('div').slideUp(); elTwoe.next('tr').find('td').slideUp(); } } if(elOne.get(0) === elTwoe.get(0)) { if(elOne.next('.tr-sub').hasClass('tr-sub-shown')) { elOne.next('.tr-sub').removeClass('tr-sub-shown'); elOne.next('tr').find('td').find('div').slideUp(); elOne.next('tr').find('td').slideUp(); } else { elOne.next('.tr-sub').addClass('tr-sub-shown'); elOne.next('tr').find('td').slideDown(); elOne.next('tr').find('td').find('div').slideDown(); } } }) }); body { background: #eee; } .wrapper { margin: auto; width: 50%; padding: 10px; margin-top: 10%; } table { background: white; width: 100%; } table th { background: gray; text-align: left; } table th, td { border-bottom: 1px solid lightgray; padding: 5px; } table .tr-show-sub { background: #EAEAEA; cursor: pointer; } table .tr-sub td { display: none; } table .tr-sub td .div-sub { display: none; } <script src="https://code.jquery.com/jquery-3.2.1.js"></script> <div class="wrapper"> <table cellspacing="0" cellpadding="3"> <thead> <tr class="table"> <th>col 1</th> <th>col 2</th> <th>col 3</th> </tr> </thead> <tbody> <tr class="tr-show-sub"> <td>col 1</td> <td>col 2</td> <td>col 3</td> </tr> <tr class="tr-sub"> <td colspan="5"><div class="div-sub"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor tortor sit amet sem tempus rhoncus. Etiam scelerisque ligula id ligula congue semper interdum in neque. Vestibulum condimentum id nibh ac pretium. Proin a dapibus nibh. Suspendisse quis elit volutpat, aliquet nisi et, rhoncus quam. Quisque nec ex quis diam tristique hendrerit. Nullam sagittis metus sem, placerat scelerisque dolor congue eu. Pellentesque ultricies purus turpis, convallis congue felis iaculis sed. Cras semper elementum nibh at semper. Suspendisse libero augue, auctor facilisis tincidunt eget, suscipit eu ligula. Nam in diam at ex facilisis tincidunt. Fusce erat enim, placerat ac massa facilisis, tempus aliquet metus. Fusce placerat nulla sed tristique tincidunt. Duis vulputate vestibulum libero, nec lobortis elit ornare vel. Mauris imperdiet nulla non suscipit cursus. Sed sed dui ac elit rutrum mollis sed sit amet lorem. </div></td> </tr> <tr class="tr-show-sub"> <td>col 1</td> <td>col 2</td> <td>col 3</td> </tr> <tr class="tr-sub"> <td colspan="5"><div class="div-sub"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor tortor sit amet sem tempus rhoncus. Etiam scelerisque ligula id ligula congue semper interdum in neque. Vestibulum condimentum id nibh ac pretium. Proin a dapibus nibh. Suspendisse quis elit volutpat, aliquet nisi et, rhoncus quam. Quisque nec ex quis diam tristique hendrerit. Nullam sagittis metus sem, placerat scelerisque dolor congue eu. Pellentesque ultricies purus turpis, convallis congue felis iaculis sed. Cras semper elementum nibh at semper. Suspendisse libero augue, auctor facilisis tincidunt eget, suscipit eu ligula. Nam in diam at ex facilisis tincidunt. Fusce erat enim, placerat ac massa facilisis, tempus aliquet metus. Fusce placerat nulla sed tristique tincidunt. Duis vulputate vestibulum libero, nec lobortis elit ornare vel. Mauris imperdiet nulla non suscipit cursus. Sed sed dui ac elit rutrum mollis sed sit amet lorem. </div></td> </tr> <tr> <td>col 1</td> <td>col 2</td> <td>col 3</td> </tr> </tbody> </table> </div>
推荐文章
- JSHint和jQuery: '$'没有定义
- 用jQuery检查Internet连接是否存在?
- 如何使用滑动(或显示)函数在一个表行?
- 如何用JavaScript截屏一个div ?
- 如何检测“搜索”HTML5输入的清除?
- 当元素从DOM中移除时触发事件
- Ajax成功事件不工作
- 引导下拉与Hover
- jQuery的.bind() vs. on()
- jQuery .live() vs .on()方法，用于在加载动态html后添加单击事件
- 事件。returnValue已弃用。请使用标准的event.preventDefault()
- 如何处理模式关闭事件在Twitter引导?
- 防止浏览器加载拖放文件
- 清除输入文本内的图标
- jQuery为ajax请求返回“parsererror”
