javascripttwitter-bootstrapjquery-ui-selectable

select elements inside the cell without selecting the table row

I'm trying to create a selectable table using bootstrap. Is there a way to select elements inside the cell without selecting the table row?

As per the code snippets below, is there a way to select the textbox without selecting the table row?

I'm trying to replicate the functionality of jqueryui/selectable

Thanks!

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

Solution

  • A simple stop propigation will do I think. Try:

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