Получить значения ячейки строки при нажатии в таблице начальной загрузки

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>