从以前的解决方案扩展表行问题 [英] Expanding Table Row Issue From Previous Solution

问题描述

我正在使用在此处找到的公认解决方案.

解决方案的 JSFiddle

我的目标只是在单击时展开表格的行.除了一个问题之外，这个解决方案对我来说非常有用.一旦展开的行可见，如果您在展开行的最底部附近单击，该行将消失并且无法重新展开.这与公认的解决方案略有不同.如果在行展开后点击名称"下的边框，解决方案行也会消失，无法重新展开.

这是JS函数:

$(function() {$("td[colspan=7]").find("p").hide();$("table").click(function(event) {event.stopPropagation();var $target = $(event.target);if ( $target.closest("td").attr("colspan") > 1 ) {$target.slideUp();} 别的 {$target.closest("tr").next().find("p").slideToggle();}});});

如果需要，我会尝试提供其他信息.

我的 td 仅用于扩展行的填充设置为 0.如果我给它一些填充，单击填充，即使在行展开之前，也会删除整个扩展行.

编辑要重现我的问题，请在展开一行后单击先前解决方案小提琴表中名称"的N"下方的边框.

编辑如果我点击边框的任何部分，就会发生在我的表格上.

解决方案

您只需更改 jsfiddle 中的一行即可:

将 $target.slideUp(); 改为 $target.closest("td").children("p").slideUp(); ，然后你即使您点击边框也能展开.

I am using the accepted solution to this problem found here.

Solution's JSFiddle

My goal is simply to have the table's row expand when clicked. This solution works great for me aside from one issue. Once a the expanded row is visible, if you click near the very bottom of the expanded row, the row will disappear and will not be able to be re-expanded. This is slightly different from the accepted solution. If you click the border under "name" after a row has been expanded, the solutions row will also disappear with no way to re-expand.

Here is the JS function:

$(function() {
    $("td[colspan=7]").find("p").hide();
    $("table").click(function(event) {
        event.stopPropagation();
        var $target = $(event.target);
        if ( $target.closest("td").attr("colspan") > 1 ) {
            $target.slideUp();
        } else {
            $target.closest("tr").next().find("p").slideToggle();
        }                    
    });
});

I will try to provide additional information if needed.

My td for only the expanding row has padding set to 0. If I give it some padding, clicking the padding, even before the row is expanded, will remove the whole expanding row.

EDIT To reproduce my issue click the border just under the 'N' of 'Name' in the previous solutions fiddle table after expanding a row.

EDIT Happens to my table if I click any part of the border.

解决方案

You have to change only one line in your jsfiddle and it will work:

Change $target.slideUp();to $target.closest("td").children("p").slideUp(); , and you will be able to expand even if you click at border.

这篇关于从以前的解决方案扩展表行问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！