单击特定td时jQuery切换表行

时间：2015-09-14 15:08:29

标签： javascript jquery toggle

因此，当我点击具有class="mov"或id="line"的特定td时，我有一个包含class="line"隐藏行的表格，我希望切换这些行。

<table align="center" id="editabletable">
<tr class="sinaledit">
<td align="center" id="line" class="line" colspan="9"> 
<table><tr><td id="+" align="center"> + </td>
<td align="center">text</td>
<td align="center" >text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
</tr></table></td>
<td align="center" id="x" class="x">x</td>

<tr class="mov">
<td align="center">Card</td>
<td align="center">Type</td>
<td align="center">Code</td>
<td align="center">Desc</td>
<td align="center">P1</td>
<td align="center">P2</td>
<td align="center">P3</td>
<td align="center">P4</td>
<td align="center">P5</td>
<td align="center">&nbsp;</td>
</tr>
</table>

这是jQuery函数：

$(function() {
    $('tr.sinaledit').click(function(){
            $(this).siblings('.mov'+this.id).toggle('slow');
        });
    $('tr[class^=mov]').hide().children('td');
});

它可以工作，但是当你点击任何td时它会切换行，甚至是x。 x td将有另一个与之关联的删除功能，这就是为什么我不希望它成为切换的一部分。但是，当您仅点击id="line"时，我无法进行切换。对不起，我是一个jQuery初学者。

这是演示的小提琴：

jsFiddle

非常感谢！

6 个答案:

答案 0 :(得分：0)

you have simply to attach the click event on the required element.In your case the element has the id line so you have to use the # selector to select this element:

$(function() {
    $('#line').click(function(){ 
            $('tr.sinaledit').siblings('.mov').toggle('slow');
        });
    $('tr[class^=mov]').hide().children('td');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table align="center" id="editabletable" class="table" cellpadding="5" cellspacing="3" border="1">
<tr class="sinaledit">
<td align="center" id="line" class="line" colspan="9"> 
<table><tr><td id="+" align="center"> + </td>
<td align="center">text</td>
<td align="center" >text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
</tr></table></td>
<td align="center" id="x" class="x">x</td>
    
<tr class="mov">
<td align="center">Card</td>
<td align="center">Type</td>
<td align="center">Code</td>
<td align="center">Desc</td>
<td align="center">P1</td>
<td align="center">P2</td>
<td align="center">P3</td>
<td align="center">P4</td>
<td align="center">P5</td>
<td align="center">&nbsp;</td>
</tr>
    
<tr class="mov">
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">&nbsp;</td>
</tr>
    </table>

答案 1 :(得分：0)

It's really just a matter of how you use your selectors. I chose to only apply the click event on anything with the '.line' class instead.

Made some changes but see the jsFiddle 

$(function() {
    $('.line').on('click', function(){
        // Find the nearest element with .line class
        // Once found, move up to the parent <tr> to find siblings
        // Note: this only works with your current structure
        $(this).closest('.line').parent().siblings('.mov').toggle();
    });

    $('tr[class^=mov]').hide().children('td');
});

答案 2 :(得分：0)

For the html structure I like more this

<style>
.mov {
    display: none;
}
</style>
<table align="center" id="editabletable">
<tr>
    <td id="add">+</td>
    <td id="remove">x</td>
</tr>
<tr>
    <td align="center">text</td>
    <td align="center">text</td>
    <td align="center">text</td>
    <td align="center">text</td>
    <td align="center">text</td>
    <td align="center">text</td>
    <td align="center">text</td>
    <td align="center">text</td>
</tr>

<tr class="mov">
    <td align="center">Card</td>
    <td align="center">Type</td>
    <td align="center">Code</td>
    <td align="center">Desc</td>
    <td align="center">P1</td>
    <td align="center">P2</td>
    <td align="center">P3</td>
    <td align="center">P4</td>
    <td align="center">P5</td>
    <td align="center">&nbsp;</td>
</tr>
</table>

For the jquery part, this is more simple:

$(function() {
 $('#add').click(function(){
         $('.mov').show('slow');
     });
 $('#remove').click(function(){
    $('.mov').hide('slow');
 });
});

答案 3 :(得分：0)

Try,

$(function() {
    $('.sinaledit').click(function(){
            $('.mov').toggle('slow');
        });
    $('tr[class^=mov]').hide().children('td');
});

This will help fixing your need.

答案 4 :(得分：0)

jsFiddle

You cannot sibling <tr> and <td>, TD should always be child of TR.
It's good to avoid "+" as ID name selector.
If you plan to have multiple buttons - simply remove all of your ID and rely on CLASSes.

Here's an example with even multiple tables:

$(function() {
  
    $('.table').on("click", ".line", function(){
      
        $(this).siblings('.mov').toggle(800);
      
      }).on("click", ".delete", function(){
      
        $(this).closest("table").fadeOut(function(){
        	$(this)/*the table*/.remove();
        });
      
    });
  
});
.line:hover {
	background-color:#cf5;
	cursor: pointer;
}
.table { 
    margin: 0 auto;
    width:100%;
    border-collapse: collapse;
    table-layout:fixed;
}
.table td,
.table th{
    padding:5px 10px;
    border:1px solid #444;
}
.table tr.mov{
    display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
    <tr class="line"> 
        <td class="show">+</td>
        <td>1 text</td>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td class="delete">x</td>
    </tr>
    <tr class="mov">
        <td>&nbsp;</td>
        <td>Card</td>
        <td>Type</td>
        <td>Code</td>
        <td>Desc</td>
        <td>P1</td>
        <td>P2</td>
        <td>P3</td>
        <td>P4</td>
        <td>P5</td>
        <td>&nbsp;</td>
    </tr>
    <tr class="mov">
        <td>&nbsp;</td>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td>&nbsp;</td>
    </tr>
</table>

<table class="table">
    <tr class="line"> 
        <td class="show">+</td>
        <td>2 text</td>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td class="delete">x</td>
    </tr>
    <tr class="mov">
        <td>&nbsp;</td>
        <td>Card</td>
        <td>Type</td>
        <td>Code</td>
        <td>Desc</td>
        <td>P1</td>
        <td>P2</td>
        <td>P3</td>
        <td>P4</td>
        <td>P5</td>
        <td>&nbsp;</td>
    </tr>
    <tr class="mov">
        <td>&nbsp;</td>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td>text</td>
        <td>&nbsp;</td>
    </tr>
</table>

答案 5 :(得分：0)

There is no </tr> tag corresponding to the <tr class="sinaledit"> tag so the browser is applying the behavior to all td tags. Try the following:

<table align="center" id="editabletable">
<tr class="sinaledit">
<td align="center" id="line" class="line" colspan="9"> 
<table><tr><td id="+" align="center"> + </td>
<td align="center">text</td>
<td align="center" >text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
<td align="center">text</td>
</tr></table></td></tr>
<tr><td align="center" id="x" class="x">x</td></tr>

<tr class="mov">
<td align="center">Card</td>
<td align="center">Type</td>
<td align="center">Code</td>
<td align="center">Desc</td>
<td align="center">P1</td>
<td align="center">P2</td>
<td align="center">P3</td>
<td align="center">P4</td>
<td align="center">P5</td>
<td align="center">&nbsp;</td>
</tr>
</table>

There are other style edits I would make to make the html easier to follow, but the above is the bare minimum you need to get the desired functionality.

updated jsfiddle

相关问题
最新问题