Question

我有一个包含隐藏行的表，可以在单击表行时显示这些行。这很好用但是其中一个列（列4）包含一个链接，当点击时我想做其他事情而不显示隐藏的行。除链接外，如何使column 4无法点击？我做了一个小提琴here

<div class="container">
  <table class="table" width="100%;">
    <tbody>
      <tr>

        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
      </tr>

      <tr class="accordion">
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td><a href="#" class="myButton">Play</a></td>

      </tr>
      <tr class="hidden-row">
        <td colspan="12">

          <div class="row">
            <div class="col-xs-12">
              <h4> More data hidden here</h4>
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>

的jQuery

 $(document).ready(function() {
  $(function() {
    var $table = $('.table');
    $table.find('.hidden-row').hide();

    $table.find('.accordion').click(function() {
      $table.find('.accordion').not(this).nextAll('.hidden-row:first').fadeOut(500);
      $(this).nextAll('.hidden-row:first').slideToggle("slow");

    });
  });
});

Answer 1

将non-clickable类添加到最后一列，并检查目标元素是否具有non-clickable或myButton类。如果有，请使用return false;之类的，

if ($(e.target).hasClass('myButton') || $(e.target).hasClass('non-clickable')) {
   return false;
}

<强>代码段，

$(function() {
  var $table = $('.table');
  $table.find('.hidden-row').hide();

  $table.find('.accordion').click(function(e) {
    if ($(e.target).hasClass('myButton') || $(e.target).hasClass('non-clickable')) {
      return false;
    }
    $table.find('.accordion').not(this).nextAll('.hidden-row:first').fadeOut(500);
    $(this).nextAll('.hidden-row:first').slideToggle("slow");

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <table class="table" width="100%;">
    <tbody>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
      </tr>
      <tr class="accordion">
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td class="non-clickable"><a href="#" class="myButton">Play</a></td>
      </tr>
      <tr class="hidden-row">
        <td colspan="12">
          <div class="row">
            <div class="col-xs-12">
              <h4> More data hidden here</h4>
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>

Answer 2

虽然其他答案可以很好地回答＆＃34;禁用列点击可点击行＆＃34;的具体问题，但实际要求不是＆＃34;点击＆＃ 34;单击链接时的行。

一个链接，点击后我想做其他事情而不显示隐藏的行

您可以使用简单的链接级别而不是列级别执行此操作：

return false;

来自jquery事件的

return false调用event.stopPropagation来阻止点击处理程序从＆＃34;冒泡＆＃34; （通过td）到tr。这也会停止链接的默认操作（在这种情况下导航到href='#'）。

如果是这个问题，请添加以下代码：

$table.find(".accordion a").click(function(e) {
    // do something here
    $(this).text($(this).text() == "Play" ? "Pause" : "Play")
    // stop the row getting a click event
    e.stopPropagation();
    // also stop the row getting the click event (so don't need the above, it's for completeness)
    return false;
})

更新了小提琴：https://jsfiddle.net/t7hezkhb/3/

Answer 3

如果当前点击的目标是点击的td行中的第四个tr

，您可以查看

喜欢!(e.target == $(this).find("td:nth-child(4)")[0])

检查以下代码段：

$(document).ready(function() {
  $(function() {
    var $table = $('.table');
    $table.find('.hidden-row').hide();

    $table.find('.accordion').click(function(e) {
       
       if(!(e.target == $(this).find("td:nth-child(4)")[0])) { 
        
        $table.find('.accordion').not(this).nextAll('.hidden-row:first').fadeOut(500);
        
        $(this).nextAll('.hidden-row:first').slideToggle("slow");
        
       }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <table class="table" width="100%;">
    <tbody>
      <tr>

        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
      </tr>

      <tr class="accordion">
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td><a href="#" class="myButton">Play</a></td>

      </tr>
      <tr class="hidden-row">
        <td colspan="12">

          <div class="row">
            <div class="col-xs-12">
              <h4> More data hidden here</h4>
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>

JQuery - 禁用单个可单击列

3 个答案: