title: How to click table row invoke modal except one column cell
body: <p>Borrowed the code from the other question <a href="https://stackoverflow.com/questions/18995461/how-can-i-show-data-using-a-modal-when-clicking-a-table-row-using-bootstrap">How can i show data using a modal when clicking a table row (using bootstrap)</a></p>
  
  <p>I modified a little bit and here is a new issue:</p>
  
  <p>There is one column I am using select to set the value (Status), every time I try to select he value and set it, since the entire row invoke the modal, so does this cell as well, how to ensure that the table row still invoke the modal, but when I choose any cell in the Status column, I can set the value (no modal show up)? Is this possible?</p>
  
  <p>HTML:
      <h1>Orders</h1></p>
  
  <pre><code>&lt;table class="table table-striped" &lt;thead&gt;
  &lt;tr&gt;
      &lt;th&gt;ID&lt;/th&gt;
      &lt;th&gt;Customer&lt;/th&gt;
      &lt;th&gt;Status&lt;/th&gt;
  &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
      &lt;tr data-toggle="modal" data-id="1" data-target="#orderModal"&gt;
          &lt;td&gt;1&lt;/td&gt;
          &lt;td&gt;24234234&lt;/td&gt;
          &lt;td&gt;
              &lt;select&gt;
                  &lt;option value="A"&gt;A&lt;/option&gt;
                  &lt;option value="B"&gt;B&lt;/option&gt;
                  &lt;option value="C"&gt;C&lt;/option&gt;
              &lt;/select&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr data-toggle="modal" data-id="2" data-target="#orderModal"&gt;
          &lt;td&gt;2&lt;/td&gt;
          &lt;td&gt;24234234&lt;/td&gt;
          &lt;td&gt;
              &lt;select&gt;
                  &lt;option value="A"&gt;A&lt;/option&gt;
                  &lt;option value="B"&gt;B&lt;/option&gt;
                  &lt;option value="C"&gt;C&lt;/option&gt;
              &lt;/select&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr data-toggle="modal" data-id="3" data-target="#orderModal"&gt;
          &lt;td&gt;3&lt;/td&gt;
          &lt;td&gt;24234234&lt;/td&gt;
          &lt;td&gt;
              &lt;select&gt;
                  &lt;option value="A"&gt;A&lt;/option&gt;
                  &lt;option value="B"&gt;B&lt;/option&gt;
                  &lt;option value="C"&gt;C&lt;/option&gt;
              &lt;/select&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;div id="orderModal" class="modal hide fade" role="dialog" aria-labelledby="orderModalLabel" aria-hidden="true"&gt;
  &lt;div class="modal-header"&gt;
      &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;x&lt;/button&gt;
      &lt;h3&gt;Order&lt;/h3&gt;
  
  &lt;/div&gt;
  &lt;div id="orderDetails" class="modal-body"&gt;&lt;/div&gt;
  &lt;div id="orderItems" class="modal-body"&gt;&lt;/div&gt;
  &lt;div class="modal-footer"&gt;
      &lt;button class="btn" data-dismiss="modal" aria-hidden="true"&gt;Close&lt;/button&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(function(){
  $('#orderModal').modal({
      keyboard: true,
      backdrop: "static",
      show:false,
  
  }).on('show', function(){
        var getIdFromRow = $(event.target).closest('tr').data('id');
      //make your ajax call populate items or what even you need
      $(this).find('#orderDetails').html($('&lt;b&gt; Order Id selected: ' + getIdFromRow  + '&lt;/b&gt;'))
  });
  </code></pre>
  
  <p>});</p>
  
  <p>Here is the jsfiddle: <a href="http://jsfiddle.net/bootstrap1987/padA5/" rel="nofollow noreferrer">http://jsfiddle.net/bootstrap1987/padA5/</a></p>
  
  <p>Thanks,</p>