Question

我的vue应用程序中有一个函数，在此处单击表行时完成：

$("#connectionsTable tr").click(function () {
  var list = [];
  var $row = $(this).closest("tr"),
  $tds = $row.find("td");
  // console.log($tds);
  // list.push({ name: $tds.eq(0).text(), numSongs: $tds.eq(1).text(), Year: $tds.eq(2).text() });
  list.push({ connectionName: $tds.eq(0).text(), host: $tds.eq(1).text(), port: $tds.eq(2).text(), serviceName: $tds.eq(2).text() });
   // self.$store.state.tableRow = list;
   self.setConnectionTableRow(list);
   self.$router.push('/analytic-two');
});

有没有办法可以编写排除表头的功能作为点击功能之一，任何帮助都会非常感谢谢谢。

Answer 1

是的，请确保您的表格标题位于正确的thead且正文位于tbody中，然后选择器才会变为：

$("#connectionsTable tbody tr").click(function () { ... } )

下面的实例。

$('table tbody tr').click(function(){
    console.log("click on body");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
  <th>Header1</th>
</tr>
</thead>
<tbody>
<tr>
  <td>Cell</td>
</tr>
</tbody>
</table>

Answer 2

在class="header-row"之类的标题行中添加一个类，并在检查该行hasClass() return false之后添加header-row，

$("#connectionsTable tr").click(function () {
   if($(this).hasClass('header-row'))
      return false; // getting header row, so return from here without executing other statements
   var list = [];
   ....
});

或者，您可以使用:not()之类的

排除标题行

$("#connectionsTable tr:not(.header-row)").click(function () {
   var list = [];
   ....
});

点击行的jQuery表抓住表头也是

2 个答案: