1

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

解决方案的 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();
        } else {
            $target.closest("tr").next().find("p").slideToggle();
        }                    
    });
});

如果需要，我将尝试提供更多信息。

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

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

如果我单击边框的任何部分，编辑会发生在我的桌子上。

4

2 回答 2

3

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

更改$target.slideUp();为$target.closest("td").children("p").slideUp();，即使单击边框也可以展开。

于 2019-09-03T18:46:30.353 回答
0

我改变了接近的方式。

请单击以下链接检查代码和结果。

我希望这是你想要的。

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>
于 2019-09-03T18:47:29.350 回答