CODEWITHSUNDEEP
javascripttwitter-bootstrapbootstrap-table
EdG
EdG

Reputation: 2351

Get the cell values of row when clicked in bootstrap table

Is there any way I can get the value of each cell when I click a particular row of a bootstrap table. I want to access the value of all the cells of that row in some other function. Currently my rowClick event passes the index of row clicked. Here is my table

<Table className='flags-table' id="flags-table" responsive hover>
                    <thead>
                    <tr>
                        <th></th>
                        <th> Time In</th>
                        <th> Time Out</th>
                        <th> Type</th>
                        <th> Category</th>
                    </tr>
                    </thead>
                    <tbody>
                    {
                        this.props.tag_fetch_reducer.tags.map((x, i) => (
                            <tr className={i === this.props.marker_reached_reducer.index ? 'selected' : ''} key={i} onClick={this.handleRowClick.bind(this, i)}>
                                <td>
                                    <div className='red-box'></div>
                                </td>
                                <td> {this.secondsToHms(x.time)} </td>
                                <td> {this.secondsToHms(x.stopTime)} </td>
                                <td> {x.tagname} </td>
                                <td> {x.category}</td>
                            </tr>
                        ))
                    }
                    </tbody>
                </Table>

Upvotes: 2

Views: 7598

Answers (1)

clockwiseq
clockwiseq

Reputation: 4229

A method I've used is that I set data attributes for each cell on the row itself. What this does, is it allows you to access the values easily. You simply wire up the click event for the row using javascript/jQuery (my example uses jQuery):

(function(document, window, $) {
  $('.flags-table tbody tr').on('click', function() {
    var time = $(this).data('time');
    var stopTime = $(this).data('stop-time');
    var tagName = $(this).data('tag-name');
    var category = $(this).data('category');
    var key = $(this).data('key');

    alert('Values: \r\n' +
      'Time: ' + time + '\r\n' +
      'Stop: ' + stopTime + '\r\n' +
      'Tag: ' + tagName + '\r\n' +
      'Category: ' + category + '\r\n' +
      'Key: ' + key + '\r\n');
  });
})(document, window, jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="flags-table" id="flags-table" responsive hover>
  <thead>
    <tr>
      <th></th>
      <th>Time In</th>
      <th>Time Out</th>
      <th>Type</th>
      <th>Category</th>
    </tr>
  </thead>
  <tbody>
    <tr data-time="08:00" data-stop-time="13:00" data-tag-name="test1" data-category="cat1" data-key="34098" class="low">
      <td>
        <div className="red-box"></div>
      </td>
      <td>08:00</td>
      <td>13:00</td>
      <td>Tag 1</td>
      <td>Category 1</td>
    </tr>
    <tr data-time="09:00" data-stop-time="15:00" data-tag-name="test2" data-category="cat2" data-key="34096" class="low">
      <td>
        <div className="red-box"></div>
      </td>
      <td>09:00</td>
      <td>15:00</td>
      <td>Tag 2</td>
      <td>Category 2</td>
    </tr>
    <tr data-time="03:00" data-stop-time="17:00" data-tag-name="test3" data-category="cat3" data-key="34095" class="low">
      <td>
        <div className="red-box"></div>
      </td>
      <td>03:00</td>
      <td>17:00</td>
      <td>Tag 3</td>
      <td>Category 3</td>
    </tr>
    <tr data-time="06:00" data-stop-time="17:20" data-tag-name="test4" data-category="cat4" data-key="34094" class="low">
      <td>
        <div className="red-box"></div>
      </td>
      <td>06:00</td>
      <td>17:20</td>
      <td>Tag 4</td>
      <td>Category 4</td>
    </tr>
  </tbody>
</table>

Upvotes: 2

Related Questions