选择单元格内的元素而不选择表格行答案

【问题标题】：select elements inside the cell without selecting the table row选择单元格内的元素而不选择表格行
【发布时间】：2018-06-28 00:58:45
【问题描述】：

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

按照下面的代码sn-ps，有没有办法选择文本框而不选择表格行？

我正在尝试复制 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>

【问题讨论】：

我不确定您要完成什么。 为什么你需要选择有问题的元素而不选择行？这是可能的，尽管可能不需要。另外，为什么您要尝试复制 jQuery UI Selectable 的功能，而不是简单地导入该库？
我正在尝试选择表格的多行并将它们传递给服务器。我在 click-row.bs.table 事件中选择行。然后最终用户应该能够编辑单元格的值，而无需打扰选择/取消选择状态。我真的不想在这个特定项目中使用 JqueryUi。

标签： javascript twitter-bootstrap jquery-ui-selectable

【解决方案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>

【讨论】：

这就是我要找的。非常感谢！

【解决方案2】：

在与“我曾经与一只熊搏斗过一次”的答案相同的注释上，您只需获取所选字段的 id（考虑到您确实有一个 id）。我添加了一个用于演示目的

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

  $table.on('click', function(e) {
    console.log(e.target.id);
  });
});

<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 id="1">Samantha</td>
      <td>40%</td>
    </tr>
    <tr>
      <td>2</td>
      <td>226,134</td>
      <td id="2"><input type="text" id="userInput" value="Martin"></td>
      <td>-20%</td>
    </tr>
    <tr>
      <td>3</td>
      <td>0.52/1.561</td>
      <td id="3">Damien</td>
      <td>26%</td>
    </tr>
  </tbody>
</table>

【讨论】：

【解决方案3】：

我不确定你为什么要使用外部库来做这么简单的事情，除非我遗漏了什么，这应该可以解决问题..

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

  $table.find("tr").click(function(e){
    if('INPUT' === e.target.tagName) return;
    var sel = 1==$(this).attr('data-selected');
    $(this).attr('data-selected', sel?0:1);
    $(this).find('td').css('background-color', sel ? "" : 'green');
    console.log(getSelections());
  });
  
  function getSelections(){
    var vals = [];
    $table.find("tr[data-selected='1']").each(function(){
      var ele = [];
      $(this).find('td').each(function(){ ele.push($(this).text()) })
      vals.push(ele);
    });
    return vals;
  }
  
});

<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>

【讨论】：