从以前的解决方案扩展表行问题答案

【问题标题】：Expanding Table Row Issue From Previous Solution从以前的解决方案扩展表行问题
【发布时间】：2019-09-04 02:47:29
【问题描述】：

我正在使用here 发现的这个问题的公认解决方案。

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

这是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();
        } else {
            $target.closest("tr").next().find("p").slideToggle();
        }                    
    });
});

如果需要，我会尽力提供更多信息。

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

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

EDIT如果我点击边框的任何部分，就会发生在我的桌子上。

【问题讨论】：

标签： javascript html

【解决方案1】：

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

把$target.slideUp();改成$target.closest("td").children("p").slideUp();，点击边框就可以展开了。

【讨论】：

【解决方案2】：

我改变了接近的方式。

请点击以下链接查看代码和结果。

我希望这是你想要的。

https://jsfiddle.net/oLkxs1j4/3/

<style>
#table{
  border-collapse: collapse;
  border-spacing: 0px;
  width: 100%;
}

#table tr{
  border-bottom: 1px solid black;
}

.expand-row{
  cursor: pointer;
}
.not-expand-row{
  cursor: not-allowed;
}
.expand-data{
  display: none;
}
</style>
<table id = "table">
  <tr class = "expand-row">
    <td>Click to expand-1</td>
    <td>Click to expand-1</td>
  </tr>
  <tr class = "expand-data">
    <td colspan = "2">
      <br><br><br><br><br><br>
      <button class = "click-to-close">CLOSE</button>
    </td>
  </tr>  
  <tr class = "expand-row">
    <td>Click to expand-1</td>
    <td>Click to expand-1</td>
  </tr>
  <tr class = "expand-data">
    <td colspan = "2">
      <br><br><br><br><br><br>
      <button class = "click-to-close">CLOSE</button>
    </td>
  </tr> 
  <tr class = "expand-row">
    <td>Click to expand-1</td>
    <td>Click to expand-1</td>
  </tr>
  <tr class = "expand-data">
    <td colspan = "2">
      <br><br><br><br><br><br>
      <button class = "click-to-close">CLOSE</button>
    </td>
  </tr> 
  <tr class = "expand-row">
    <td>Click to expand-1</td>
    <td>Click to expand-1</td>
  </tr>
  <tr class = "expand-data">
    <td colspan = "2">
      <br><br><br><br><br><br>
      <button class = "click-to-close">CLOSE</button>
    </td>
  </tr>   
</table>
<script>
$(function() {
    $('#table .expand-row').on('click', function(){
    if(!$(this).hasClass('not-expand-row')){
      var index = $(this).index('#table .expand-row');
      $('#table .expand-data').eq(index).css('display', 'table-row');
    }
  });

    $('#table .click-to-close').on('click', function(){
    var index = $(this).index('#table .click-to-close');
    $('#table .expand-data').eq(index).css('display', 'none');
    $('#table .expand-row').eq(index).addClass('not-expand-row');
  });
});
</script>

【讨论】：