ブートストラップテーブル

Question

でクリックしたときに、私は、ブートストラップ、テーブルの特定の行をクリックしたときに、私は、各セルの値を取得することができますどのような方法があります行のセル値を取得します。他の機能では、その行のすべてのセルの値にアクセスしたいと思います。現在、私のrowClickイベントは、クリックされた行のインデックスを渡します。私のテーブルはここにあります

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

Answer 1

私が使った方法は、行自体に各セルのデータ属性を設定することでした。これは、あなたが値に簡単にアクセスできるようにするのですか？あなたは、単にJavaScriptを使用して行のクリックイベントをアップ配線/ jQueryのは、（私の例では、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>