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
Post a Comment