select 单元格内的元素 [=11th=] 行中没有 select

Question

我正在尝试使用 bootstrap 创建一个 select 可用的 table。有没有办法 select 单元格内的元素而不 selecting table 行？

根据下面的代码片段，有没有办法 select 文本框而不 select 进入 table 行？

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

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

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

Answer 2

与上面 "I wrestled a bear once" 的回答相同，您可以只获取所选字段的 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>

Answer 3

我想一个简单的停止传播就可以了。尝试：

$("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>

select 单元格内的元素 [=11th=] 行中没有 select

select elements inside the cell without selecting the table row

javascript

jquery-ui-selectable

twitter-bootstrap