javascript - Store the checked rows of table in an array -


i mapping data table populate dynamically, in reactjs application. each row has checkbox. want record checked , unchecked rows of table. have array stores selected rows. how can record checked , unchecked event of particular row. know have assign unique id each row. not able make specific row check , uncheck event getting fired. how doing right now, doesn't uses unique id concept

this table

<table classname="table table-hover table-condensed table-detailed"                                        id="detailedtable" ref={node => this.table_el = node}>                                     <thead>                                     <tr>                                         <th classname="sorting_disabled wd-5p">                                         </th>                                         <th >title</th>                                         <th classname="wd-15p">channel</th>                                         <th classname="wd-10p">file type</th>                                         <th classname="wd-15p">uploaded</th>                                         <th classname="wd-20p">process</th>                                         <th classname="wd-10p">status</th>                                     </tr>                                     </thead>                                     <tbody>                                     {                                         this.state.mediafiles.map((item, i) => (                                             <tr id={i}>                                                 <td classname="v-align-middle">                                                     <div classname="checkbox">                                                         <input type="checkbox" value="3" id={"checkbox1" + i}/>                                                         <label htmlfor={"checkbox1" + i}                                                                onclick={() => this.handlecheckboxclick(item.url, item.poster.list_thumbnail)}/>                                                     </div>                                                 </td>                                                 <td classname="v-align-middle semi-bold">                                                      <div classname='file-image'                                                          style={{backgroundimage: `url('${item.poster.list_thumbnail}')`}}/>                                                     <div classname="movie-title">                                                         <span classname="movie-name"><a                                                             onclick={this.showvideo(item.url, item.file, item.id, item.title, item.duration, item.height, item.width, item.frame_rate)}>{item.title}</a></span><br/>                                                         <span classname="movie-info">movie trailer</span>                                                     </div>                                                 </td>                                                 <td classname="v-align-middle">zee movies</td>                                                 <td classname="v-align-middle">avi</td>                                                 <td classname="v-align-middle">11-11-2016</td>                                                 <td classname="v-align-middle">                                                     <a href="#" classname="btn">compliance - india</a><br/>                                                     <a href="#" classname="btn">objects</a>                                                     <a href="#" classname="btn">faces</a>                                                 </td>                                                 <td classname="v-align-middle text-success"> {this.jobstatus(item.job_status)}</td>                                             </tr>                                         ))                                     }                                     </tbody>                                 </table> 

this handlecheckbocclick function

handlecheckboxclick(file, image) {         var =         console.log('x');         settimeout(function () {             if ($('.checkbox').find('input').is(":checked")) {                 console.log("checked")                 that.setstate({                     files_for_process: that.state.files_for_process.concat([file]),                     selected_file_image: that.state.selected_file_image.concat([image])                 })                 console.log(that.state.selected_file_image)                 $('#hideatwill').removeclass('assign-wrap-hidden');             } else {                  console.log('unchecked')                 $('#hideatwill').addclass('assign-wrap-hidden');             }         }, 5)     } 

but code looks whether of checkbox checked or not. if yes, stores value when row unselected also. example: 6 rows checked , uncheck 1 of 6 rows, value of uncheck row gets stored in state.files_for_process array.


Comments

Popular posts from this blog

Sort a complex associative array in PHP -

vb.net - How to ignore if a cell is empty nothing -

recursion - Can every recursive algorithm be improved with dynamic programming? -