Question

我有桌子，我需要点击行。当我点击行时，div应该向下滑动。这应该发生在每一行。

<table class="table table-hover" id="table_content">
    <tr id='a'>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>

    <tr id='b'>
       <td>4</td>
       <td>5</td>
       <td>6</td>
    </tr>
</table>

因此，当我点击任何一行时，下面的div应该向下滑动。

<div>You slide down a row with content xyz</div>

这个xyz是可变的。对于每一行它都是不同的。我将进行AJAX调用以获取xyz值。对于每一行，它应该向下滑动。 <div>的展示位置应位于该行的下方。我怎么能这样做？

Answer 1

使用slide toggle

Demo Fiddle

用于显示点击行

下方的编辑

tr {
    display:block;
    width:100%;
}
.test {
    display:none;
}

Updated Fiddle Demo

$('tr').click(function () {
    $(this).append(($('.test')).slideToggle('slow'));
})

HTML

<table class="table table-hover" id="table_content">
    <tr id='a'>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr id='b'>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
</table>

<div class="test">You slide down a row with content xyz</div>

Answer 2

你shouldn't use tables anymore。您应该使用display: inline-block或float: left（请注意，如果您选择浮动，则必须使用众多clearfix方法之一）
像这样设置

HTML

<div class="row">
   <div class="column">1</div>
   <div class="column">2</div>
   <div class="column">3</div>
   <div class="content">this is the content for a</div>
</div>
<div class="row">
   <div class="column">1</div>
   <div class="column">2</div>
   <div class="column">3</div>
   <div class="content">this is the content for b</div>
<div>

CSS

.row{
   margin: 0;
   padding: 0;
}

.column{
   display: inline-block;
}

.content{
   display: none;
}

JQUERY

$('.row').click(function(){
$(this).find('.content').slideToggle();
})

更新：JSFiddle

Answer 3

我认为您不应该添加div，而是添加另一行，以将其集成到表中。这样的事情应该做：

$('tr').click(function() {
  $(this).after('<tr class="extra"><td colspan="3"><div>Your content is xyz</div></td></tr>');
  $(this).next('.extra').find('div').slideDown(500);
});

还有一些CSS

.extra div {
  display: none;
}

尚未测试，但应该这样做。

jQuery向下滑动并向上滑动

3 个答案: