Question

我需要的是，当我点击“点击”按钮时，“删除”列应该是可见的和可编辑的。当我再次单击相同的“单击”按钮时，删除列应向右滑动并隐藏在B，C和D列之后，依此类推，而不会损坏整个表格和视图的宽度。在这里查看。

JSfiddle演示

 <div class="menuBtn">click</div>
    <table class="whole" border="1px">
        <tr>
            <th class="menu">Delete</th>
            <th>Data1 c</th>
            <th>date2 c</th>
        </tr>
        <tr>
            <td class="menu">
                <input type="checkbox" value="Bike">
            </td>
            <td>data</td>
            <td>date1</td>
        </tr>
        <tr>
            <td class="menu">
                <input type="checkbox" value="car">
            </td>
            <td>data2</td>
            <td>date3</td>
        </tr>
    </table>

JS

$('.menuBtn').click(function (event) {
    value = $('.whole').css('right') === '-100px' ? 0 : '-100px';
    $('.whole').animate({
        right: value
    });
});

CSS：

.whole {
    position: relative;
    Width:100%;
}
.menu {
    left: 0;
}

Answer 1

可能是您可以更改行的显示类型 table-row to block或inline-block。然后应用任何动画。它会工作。但是，您必须自己调整宽度。这对JS来说应该不那么困难。

Answer 2

请原谅我，如果这看起来很脏，但你可以尝试一下。

$('.menuBtn').click(function (event) {

    if(jQuery('table.fixed-row').length > 0){
      jQuery('table.fixed-row').remove();
    }
    var $table = jQuery('table.whole');
    var $fixedtr = $table.clone().insertBefore($table).addClass('fixed-row');
    $fixedtr.find('tr:not(:first-child)').remove();

    jQuery('table.whole tr:first-child').css('display','none');
    jQuery('table.whole.fixed-row tr:first-child').css('display','table-row');
    value = $('.whole').css('right') === '-100px' ? 0 : '-100px';
    $('.whole.fixed-row').animate({
        right: value
    });

});

.whole {
    position: relative;
    Width:100%;
}
.menu {
    left: 0;
}

.whole span {
    position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menuBtn">click</div>
<table class="whole" border="1px">
    <tr>
        <th class="menu">Delete</th>
        <th>Data1 c</th>
        <th>date2 c</th>
    </tr>
    <tr>
        <td class="menu">
            <input type="checkbox" value="Bike">
        </td>
        <td>data</td>
        <td>date1</td>
    </tr>
    <tr>
        <td class="menu">
            <input type="checkbox" value="car">
        </td>
        <td>data2</td>
        <td>date3</td>
    </tr>
</table>

Answer 3

我以为我记得看过你可以切换的切换方法但是我不记得我现在看到的地方所以我会为你做另一种选择:)

$('.menuBtn').click(function(e){
    e.preventDeafult();
    var direction=($('.whole').hasClass('out'))?"+=100px":"-=100px";
    $('.whole').animate({'right':direction},500,function(){if(!$(this).hasClass('out'))$(this).addClass('out');else $(this).removeClass('out');});
});

但如上所述，我不认为表格行能够以这种方式定位吗？其他方法是使用slideIn()或使用宽度代替？有很多方法。祝好运！

Answer 4

嗨pauli请看看你想要的是这个还是什么。？

ANSI

var h = false;
$('.menuBtn').click(function (event) {
    if(h == false){        
    	$('.menu').each(function(){$(this).toggle( "slow", function() { left: "0" });});
    }else{
        $('.menu').each(function(){$(this).toggle( "slow", function() { left: "50" });});
    }    
});

.whole {
    position: relative;
    Width:100%;
}
.menu {
    left: 50;
    display: none;
}

这是演示工作代码

Demo Working code

Answer 5

表很难动画。在我看来，你应该使用CSS过渡和切换类。这是一个例子：

$('.menuBtn').click(function (event) {
    $('.menu').toggleClass('slided');
});

.whole {
    position: relative;
    Width:100%;
}
.menu {
    left: 0;
}
.whole .menu {
    max-width: 0;
    overflow: hidden;
    background: red;
    text-indent: -10%;    
    transition: all 1s;
}

.whole .menu.slided {
    max-width: 100px;
    text-indent: 0;
    background: transparent;
    transition: all 1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="menuBtn">click</div>
<table class="whole" border="1px">
    <tr>
        <th class="menu">Delete</th>
        <th>Data1 c</th>
        <th>date2 c</th>
    </tr>
    <tr>
        <td class="menu">
            <input type="checkbox" value="Bike">
        </td>
        <td>data</td>
        <td>date1</td>
    </tr>
    <tr>
        <td class="menu">
            <input type="checkbox" value="car">
        </td>
        <td>data2</td>
        <td>date3</td>
    </tr>
</table>

通过滑动效果显示HTML第一列按钮单击

5 个答案: