CODEWITHSUNDEEP
javascripttwitter-bootstrapjquery-ui-selectable
ecasper
ecasper

Reputation: 509

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>

Upvotes: 0

Views: 255

Answers (3)

I wrestled a bear once.
I wrestled a bear once.

Reputation: 23389

I'm not sure why you're using an external library for something this simple unless I'm missing something, this should do the trick..

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

Upvotes: 0

NSTuttle
NSTuttle

Reputation: 3345

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>

Upvotes: 1

Raphael Cunha
Raphael Cunha

Reputation: 1114

On the same note as the answer above by "I wrestled a bear once", you can just get the id of the selected field (considering you do have an id). I added one for demonstration purposes

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

Upvotes: 0

Related Questions