I have My table in controller and I want to select <tr>
to highlight table row from view page with script after table row selected
View:
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/plugins/datatables/dataTables.bootstrap4.css">
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/custom/css/custom_style.css">
<style>
.highlight { background-color: #1DA5FF; color:#fff; }
th,
td {
white-space: nowrap;
}
div.dataTables_wrapper {
direction: rtl;
}
div.dataTables_wrapper {
width: 1000px;
margin: 0 auto;
font-family: Vazir;
font-size: 10px;
}
th {
min-width: 80px;
height: 32px;
border: 1px solid #222;
white-space: nowrap;
}
td {
min-width: 80px;
height: 32px;
border: 1px solid #222;
white-space: nowrap;
text-align: center;
}
</style>
<form role="form" id="print_loading_sheet" method="POST" enctype="multipart/form-data">
<section class="content">
<div class="row">
<div class="table-responsive">
<table id="loading_sheet_table" class="table table-bordered table-striped table-sm" >
</table>
</div>
</div>
</section>
</form>
<script>
$(document).ready(function($) {
var ac_type="<?php echo $_POST['ac_type']; ?>";
var Station="<?php echo isset($_POST['Station'])? $_POST['Station'] :''; ?>";
var MainStaion="<?php echo isset($_POST['MainStaion'])? $_POST['MainStaion'] : ''; ?>";
var All="<?php echo isset($_POST['All'])? $_POST['All'] : ''; ?>";
$.ajax({
url :"<?php echo base_url(); ?>booking/report/loading_sheet/LoadingSheetController/loadingSheet",
type: 'POST',
data: {
ac_type:ac_type,
Station:Station,
MainStaion:MainStaion
},
dataType: "html",
success: function(data){
$('#loading_sheet_table').html(data);
},async:false,
error:function(data){
console.log('error occured during featch');
}
});
$("#loading_sheet_table tr").click(function() {
var selected = $(this).hasClass("highlight");
$("#loading_sheet_table tr").removeClass("highlight");
if(!selected)
$(this).addClass("highlight");
});
});
</script>
Controller:
<?php
public function loadingSheet(){
$brnachId = $this->session->userdata('user_branch');
$ac_type = $this->input->post('ac_type');
$formData = array();
$data = array( 'ac_type' => $ac_type,
'station' => $to, );
$this->load->model('booking/report/LoadingSheetModel','sendValues');
$modResult = $this->sendValues->receivingSheetOfStationwise($data,$brnachId);
?>
<form role="form" id="bilties" name="bilties" method="post">
<table id="loading_sheet_table" class="table table-bordered table-sm" style=" overflow: auto;" >
<thead >
<tr>
<th class="col1"><input type="checkbox" name="selectedrecord" class="checkbox" value="1"><br>Bilty Id</th>
<th class="col2"><input type="checkbox" name="selectedrecord" class="checkbox" value="2"><br>LR No</th>
<th class="col3"><input type="checkbox" name="selectedrecord" class="checkbox" value="3"><br>Consignor Name</th>
</tr>
</thead>
<tbody>
<?php foreach($modResult as $bilty):?>
<tr>
<td><?php echo $bilty->id;?></td>
<td><?php echo $bilty->lr_no;?></td>
<td><?php echo $bilty->consignor;?></td>
</tr>
<?php endforeach; ?>
</tbody>
</tr>
</table>
</form>
<?php } ?>
I do not know where I am wrong in my code
just replace your jquery code with
$(document).on("click","#loading_sheet_table tr",function() {
var selected = $(this).hasClass("highlight");
$("#loading_sheet_table tr").removeClass("highlight");
if(!selected)
$(this).addClass("highlight");
});
because you have to take dynamically generated element click event.
You just have to add the opposite state of selected to remove the highlight
class when the tr
is already selected :
$("#loading_sheet_table tr").on('click',function() {
var selected = $(this).hasClass("highlight");
if(!selected) {
$(this).addClass("highlight");
} else {
$(this).removeClass("highlight");
}
});
use on() method. On method will work for both current and FUTURE elements (like a new element append by a script).
$("#loading_sheet_table tr").on('click',function() {
var selected = $(this).hasClass("highlight");
$(this).removeClass("highlight");
if(!selected)
$(this).addClass("highlight");
});