Question

我在每一行都有一个点击事件，但是我想为第七列中具有类名“doc”的行中的特定单元格禁用它。

我有这段代码。

$('#table').on('click', 'tbody tr', function () {})

我试图通过在我的选择器中移除它来移除单元格，但它不起作用

$('#table').on('click', 'tbody tr:not(.doc td:eq(6))', function () {})

谢谢

Answer 1

在td而不是tr上附加活动。

$('#table').on('click', 'tbody tr:not(.doc) td:not(:eq(6))', function () {})

Answer 2

当这个孩子的点击被触发时，你应该尝试停止传播

$('table')
  .on('click', 'tbody tr.doc td:nth-child(3)', e => {
    console.log('cell clicked')
    e.stopPropagation();
  })
  .on('click', 'tbody tr', e => {
    console.log('row clicked', $(e.currentTarget).index())
  });

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

table tbody {
  border: 1px solid black;
}

table tbody tr {
  color: white;
  text-align: center;
}

table tbody tr td {
  width: 50px;
  height: 50px;
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner-message">
  <table>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
      <tr class="doc">
        <td>1</td>
        <td>2</td>
        <td style="background: blue;">3</td>
        <td>4</td>
      </tr>
      <tr class="doc">
        <td>1</td>
        <td>2</td>
        <td style="background: blue;">3</td>
        <td>4</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
      </tr>
    </tbody>
  </table>
</div>

停用特定行和特定列中的单元格的单击事件

2 个答案: