javascript - 选择单元格内的元素而不选择表格行

Question

我正在尝试使用 Bootstrap 创建一个可选择的表。有没有办法在不选择表格行的情况下选择单元格内的元素？

根据下面的代码片段，有没有办法在不选择表格行的情况下选择文本框？

我正在尝试复制 jqueryui/selectable 的功能

谢谢!

$(function() {
  var $table = $('#table');

  $table.on('click-row.bs.table', function(e, row, $element) {
    alert("Row is selected");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css" rel="stylesheet"/>
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>


<table id="table"class="table table-hover" data-toggle="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Data</th>
      <th>User</th>
      <th>Value</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>0.52,1.041</td>
      <td>Samantha</td>
      <td>40%</td>
    </tr>
    <tr>
      <td>2</td>
      <td>226,134</td>
      <td><input value="Martin"></td>
      <td>-20%</td>
    </tr>
    <tr>
      <td>3</td>
      <td>0.52/1.561</td>
      <td>Damien</td>
      <td>26%</td>
    </tr>
  </tbody>
</table>

Answer 1

我认为简单的停止传播就可以了。尝试:

$("input").click(function(e) {
      e.stopImmediatePropagation();
  });

$(function() {
  var $table = $('#table');
  
  $table.on('click-row.bs.table', function(e, row, $element) {
    alert("Row is selected");
  });
  
  $("input").click(function(e) {
      e.stopImmediatePropagation();
  });
  
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css" rel="stylesheet"/>
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>


<table id="table"class="table table-hover" data-toggle="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Data</th>
      <th>User</th>
      <th>Value</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>0.52,1.041</td>
      <td>Samantha</td>
      <td>40%</td>
    </tr>
    <tr>
      <td>2</td>
      <td>226,134</td>
      <td><input value="Martin"></td>
      <td>-20%</td>
    </tr>
    <tr>
      <td>3</td>
      <td>0.52/1.561</td>
      <td>Damien</td>
      <td>26%</td>
    </tr>
  </tbody>
</table>