We Keep Coding

looping through a table and storing a particular cell in an array if row is checked

I currently have a table that is triggered by a drop down. Inside the table, there's a checkbox. When the check box is checked and the user clicks on the confirm button, the code should loop through the table and get the email values of all the checked rows and store them in an array. So far, it can check if the rows are checked. I've found a few ways online but its not working. Here's the table:
<?php if ($picked != null){ ;
foreach ($picked as $rows): ?>
echo base_url(); ?>employer/view/send/<?php echo $rows['username']; ?>-->
<!--form action="" method="POST"-->
<?php endforeach; ?>
<table id="view_add"
class="table dataTable table-striped table-dynamic table-hover _tm">
<thead>
<tr>
<th class="sorting_asc" tabindex="0" rowspan="1" colspan="1"
style="width: 250px;">
Applicant Name
</th>
<th class="sorting" tabindex="0" rowspan="1" colspan="1"
style="width: 200px;">
Employer
</th>
<th class="sorting" tabindex="0" rowspan="1" colspan="1"
style="width: 200px;">
Post Header
</th>
<th class="sorting_asc" tabindex="0" rowspan="1" colspan="1"
style="width: 450px;">
Description
</th>
<th class="sorting_asc" tabindex="0" rowspan="1" colspan="1"
style="width: 100px;">
VIEW CV
</th>
<th class="sorting_asc" tabindex="0" rowspan="1" colspan="1"
style="width: 100px;">
</th>
</tr>
</thead>
<tbody>
<?php foreach ($picked as $rows): ?>
<tr>
<td><?php echo $rows['applicantName']; ?></td>
<td><?php echo $rows['employerName']; ?></td>
<td><?php echo $rows['postingName']; ?></td>
<td><?php echo $rows['postDescription']; ?></td>
<td style="display: none;"><?php echo $rows['email']; ?></td>
<td><a id="stress" data-toggle="modal" href="#editButton"
data-full="<?php echo $rows['fullName']; ?>"
data-school="<?php echo $rows['institution']; ?>"
data-state="<?php echo $rows['state']; ?>"
data-location="<?php echo $rows['location']; ?>"
data-dob="<?php echo $rows['dob']; ?>" data-skill="<?php echo $rows['skills']; ?>"
data-sex="<?php echo $rows['sex']; ?>" data-gpa="<?php echo $rows['cgpa']; ?>"
data-call="<?php echo $rows['phone']; ?>"
data-like="<?php echo $rows['favoured']; ?>"
data-award="<?php echo $rows['awards']; ?>"
data-interest="<?php echo $rows['interests']; ?>" class="myeditButton"
>view</a></td>
<td>
<label class="switch m-r-40">
<input type="checkbox" class="switch-input"
id="<?php echo $rows['applicationKey']?>"
data-mail="<?php echo $rows['email']; ?>"
data-confirm="<?php echo $rows['applicationId']; ?>"
id="check" name="check" <?php echo $rows['status'] ? 'checked':''; ?> >
<span class="switch-label" data-on="yes" data-off="no"></span>
<span class="switch-handle"></span>
</label>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<div class="form-group">
<input type="submit" value="Confirm" id="mail" class="btn btn-primary mail">
</div>
<!--/form-->
<?php }else{ ;?>
<div class="alert alert-warning">
<h4>There are no current Applicants for this post.</h4>
</div>'
<?php } ;?>
Here's the little script I've used:
<script>
$(document).on("click", "#mail", function () //<-small mistake here
{
var mail_list = [];
$( 'input[type=checkbox]:checked' ).each(
function(){
var mail = $(this).data("mail");
mail_list.push(mail);
var emailers = mail_list.join(",");
//SEND TO PHP
$.ajax({
type: 'post',
url: '<?php echo base_url(); ?>employer/view/send',
data: {
chosen: emailers
},
success: function( data ) {
console.log( data );
}
});
//the END
}
)
});
</script>
My JS isn't so good.
Lastly, heres the php end
else if ($param1 == 'send')
{
$src1= $_POST['chosen'];
$array = explode(",", $src1);
print_r($array);

First, you should add a way to "find" the email value of a row. So edit the html with something like that :
<td style="display: none;" class="email-value">
<?php echo $rows['email']; ?>
</td>
Now, I think there is a small error in your code, an html id is targetable by # and a class by a .. So with my changement I propose :
$(document).on("click", "#mail", function () //<-small mistake here
{
var mail_list = [];
$( 'input[type=checkbox]:checked' ).each(
function(){
var mail = $(this).parents("tr").find(".email-value").text();
//this line search the "tr" parent of each input checkbox that's checked,
//and then finds the child "email" value of it.
mail_list.push(mail);
}
)
})
Alter solution
Add the email in data parameters of the checkbox
<input type="checkbox" class="switch-input"
id="<?php echo $rows['applicationKey']?>"
data-mail="<?php echo $rows['email']; ?>"
data-confirm="<?php echo $rows['applicationId']; ?>"
data-email="<?= $rows['email']"
id="check" name="check" <?php echo $rows['status'] ? 'checked':''; ?> >
Then, the javascript become quite simple :
$(document).on("click", "#mail", function () //<-small mistake here
{
var mail_list = [];
$( 'input[type=checkbox]:checked' ).each(
function(){
var mail = $(this).data("email");
mail_list.push(mail);
//the END
}
)
})
update : oops, it's parents*, parent can't go upper than one level...
update2 : Add an alternative version, simplified

<script type="text/javascript">
$(document).on("click", ".mail", function ()
{
var emailList = [];
var selectedRows = $( 'table._tm' ).find( 'tbody' ) // select table body and
.find( 'tr' ) // select all rows that has
.has( 'input[type=checkbox]:checked' ) // checked checkbox element
selectedRows.each(function(idx, elem) {
var email = jQuery(elem).find('input[type="checkbox"]').data("mail");
emailList.push(email);
});
console.log( 'elem:', emailList );
} );

This should be quite easy try something like this:
var emailList = [];
selectedRows.forEach(function(idx, elem) {
var email = jQuery(elem).data("mail");
emailList.push(email);
});

How to redirecting page to another page using ajax jquery in codeigniter?

am using codeigniter, am working shopping cart. after selecting of items to cart using ajax jquery. Here, items menu and cart table will be side by side displayed.
Now, my task is to copying cart items to another table, by clicking button,which is done. now problem is on clicking button i need to copied and at a time i need to route to another page.. here i can copy cart items to another table but i can't redirect to another.for this i used jquery ajax.
now i need route to page which in views folder users/basket.php
Home.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<div class="row">
<div class="col-lg-12 text-center">
<?php if(isset($_SESSION['loggedin'])){?>
<div class="alert alert-success"><?php echo $_SESSION['loggedin'];?></div>
<?php } ?>
Hello, <?php echo $_SESSION['username']?>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<table class="table table-condensed table-hover">
<tr>
<th class="text-center">Item</th>
<th class="text-center">Quantity</th>
<th class="text-center">Price</th>
<th class="text-center">Add</th>
</tr>
<?php foreach($items as $item):?>
<tr class="success">
<td><?php echo $item['product_name'];?></td>
<td class="text-center"><input type="text" name="quantity" id="<?php echo $item['product_id'];?>" class="quantity" maxlength="2" size="2"></td>
<td><?php echo $item['product_price'];?></td>
<td><button type="button" name="add_cart" class="add_cart" data-productname="<?php echo $item['product_name'];?>" data-price="<?php echo $item['product_price'];?>" data-productid="<?php echo $item['product_id'];?>"><i class="fa fa-plus-circle"></i></button></td>
</tr>
<?php endforeach; ?>
</table>
</div>
<div class="col-lg-6 col-lg-offset-1">
<div id="cart_details" class="text-center">
</div>
</div>
</div>
Product_controller.php:
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Products extends CI_Controller {
public function add(){
$this->load->library('cart');
$data = array(
'id' => $_POST["product_id"],
'name' => $_POST["product_name"],
'qty' => $_POST["quantity"],
'price' => $_POST["product_price"],
);
$this->cart->insert($data); //return rowid
echo $this->view();
}
public function load(){
echo $this->view();
}
public function remove(){
$this->load->library('cart');
$row_id = $_POST["row_id"];
$data = array(
'rowid' => $row_id,
'qty' => 0
);
$this->cart->update($data);
echo $this->view();
}
public function clear(){
$this->load->library('cart');
$this->cart->destroy();
echo $this->view();
}
public function view(){
$this->load->library('cart');
$output = '';
$output.='
<h3>Shopping cart</h3><br/>
<div class="table-responsive">
<div align="right">
<button type="button" id="clear_cart" class="btn btn-danger"><i class="fa fa-trash-o" aria-hidden="true"></i></button>
</div>
<br/>
<table class="table table-bordered">
<tr>
<th class="text-center">Name</th>
<th class="text-center">Quantity</th>
<th class="text-center">Price</th>
<th class="text-center">Total</th>
<th class="text-center">Action</th>
</tr>';
$count = 0;
$content=$this->cart->contents();
foreach($content as $items){
$count++;
$output .='
<tr>
<td>'.$items["name"].'</td>
<td>'.$items["qty"].'</td>
<td>'.$items["price"].'</td>
<td>'.$items["subtotal"].'</td>
<td><button type="button" name="remove" class="btn btn-danger btn-xs remove_inventory" id="'.$items["rowid"].'"><i class="fa fa-times" aria-hidden="true"></i></button></td>
</tr>';
}
$output .='
<tr>
<td colspan="4" align="right">Total</td>
<td>'.$this->cart->total().'</td>
</tr>
</table>
<button type="submit" name="basket" class="btn btn-danger btn-lg basket" ><i class="fa fa-shopping-cart" aria-hidden="true"></i></button>
</div>';
if($count == 0){
$output = '<h3>Cart is Empty</h3>';
}
return $output;
}
public function basket(){
if ($cart = $this->cart->contents()){
foreach ($cart as $item){
$order_detail = array(
'tblItemsID' => $item['id'],
'tblLoginID' => $this -> session -> userdata('user_id'),
'Qty' => $item['qty'],
'price' => $item['price'],
'total' => $item['subtotal']
);
$this->db->insert('tblShoppingCart', $order_detail);
}
}
}
}
Note:In product_controller.php i coded button to copy cart items to another table. on button click event i wrote in jquery ajax below
jquery Ajax:
<script>
$(document).ready(function(){
$('.add_cart').click(function(){
var product_id=$(this).data("productid");
var product_name=$(this).data("productname");
var product_price=$(this).data("price");
var quantity=$('#' + product_id).val();
if(quantity != '' && quantity >0)
{
$.ajax({
url:"<?php echo base_url();?>products/add",
method:"POST",
data:{product_id:product_id,product_name:product_name,product_price:product_price ,quantity :quantity},
success:function(data)
{
alert("Product Added into cart");
$('#cart_details').html(data);
$('#' + product_id).val('');
}
});
}
else
{
alert("Please Enter Quantity");
}
});
$('#cart_details').load("<?php echo base_url();?>products/load");
$(document).on('click','.remove_inventory',function(){
var row_id = $(this).attr("id");
if(confirm("Are you sure you want to delete item")){
$.ajax({
url:"<?php echo base_url();?>users/remove",
method:"POST",
data:{row_id:row_id},
success:function(data)
{
alert("Product remove fromm cart");
$('#cart_details').html(data);
}
});
}else{
return false;
}
});
$(document).on('click','#clear_cart',function(){
if(confirm("Are you sure you want to delete item"))
{
$.ajax({
url:"<?php echo base_url();?>products/clear",
success:function(data)
{
alert("Are you sure you want clear cart?");
$('#cart_details').html(data);
}
});
}
else{
return false;
}
});
$(document).on('click','.basket',function(){
if(confirm("Are you sure you want to delete item"))
{
$.ajax({
url:"<?php echo base_url();?>products/basket",
method:"POST",
success:function(data)
{
alert("Are you sure?");
window.location="users/basket";
}
});
}
else{
return false;
}
});
});
</script>
----------

Use this code on your needed redirect place:
where you will retrieve the response via ajax success response (date);
before that you will return the value in server side which mean controller.
$.ajax({
url:"<?php echo base_url();?>products/basket",
method:"POST",
success:function(data)
{
alert("Are you sure?");
location.href = data.url_path;
}
});

Use window.location.href
$.ajax({
url:"<?php echo base_url();?>products/basket",
method:"POST",
success:function(data)
{
alert("Are you sure?");
window.location.href="<?php echo base_url();?>users/basket";
}
});

after ajax success just write.
window.location.href="redirect_location_name";

How to write on the server data edited by the client

I want a Select Box where I can Filter the Data from the Database (with Ajax - no site reload). For example: Order the data by ID or Order the data by name
Thats working fine and now when I get that data I want also that I can edit the data with Inputs and save it (also trough ajax) but I dont know how. I know how to save data with ajax but not when the data is a response from another ajax.
Code: (Its not well formatted here, that's why pastebin: http://pastebin.com/7mgi6VMc)
Index:
<div class="wrapper">
<p id="result">Erfolgreich gespeichert!</p>
<br>
<div class="filter">
<form>
Anzeige:
<select class="selectFilter" onchange="filterFunction(this.value)">
<option value="id_back">ID - Aufwärts</option>
<option value="id_up">ID - Abwärts</option>
</select>
</form>
</div>
<br>
<br>
<div id="resultCatalogue">
<b>Bitte wähle die gewünschte Anzeige ...</b>
</div>
</div>
getData.php:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css? family=Open+Sans" />
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$("#save").on("submit", function(event) {
event.preventDefault();
$.ajax({
type: "POST",
url: "./save.php",
data: $(this).serialize(),
success: function(data) {
if($('#result').css('display') == 'none') {
document.getElementById('result').style.display = 'block'
} else {
document.getElementById('result').style.display = 'none'
setTimeout(function() {
document.getElementById('result').style.display = 'block'
}, 100);
}
},
});
});
</script>
</head>
<body>
<?php
$type = intval($_GET['type']);
if($type == "id_up")
{
echo '
<table class="tableCatalogue">
<tr>
<th class="th" width="5%">ID</th>
<th class="th" width="5%">Unter-ID</th>
<th class="th" width="15%">Titel</th>
<th class="th" width="5%">Iceron</th>
<th class="th" width="10%">Sichtbar</th>
<th class="th" width="10%">Aktiv</th>
<th class="th" width="5%">Min. Rank</th>
<th class="th" width="5%">VIP</th>
<th class="th" width="5%">Reihen Nummer</th>
<th class="th" width="10%">Layout</th>
</tr>
<form method="post" id="save">
';
$index = 0;
$getCataloguePages = mysql_query("SELECT * FROM catalog_pages");
while($row = mysql_fetch_array($getCataloguePages))
{
$id = $row['id'];
$parent_id = $row['parent_id'];
$caption = $row['caption'];
$icon_image = $row['icon_image'];
$visible = $row['visible'];
$enabled = $row['enabled'];
$min_rank = $row['min_rank'];
$min_vip = $row['min_vip'];
$order_num = $row['order_num'];
$page_layout = $row['page_layout'];
$i++;
if(IsEven($i)){
$even = "Even";
} else {
$even = "Odd";
}
echo '
<tr>
<td class="td'.$even.'" width="5%"><input placeholder="ID" class="inputTable" name="id[]" value="'.$id.'"></td>
<td class="td<?php echo $even; ?>" width="5%"><input placeholder="Unter-ID" class="inputTable" name="parent_id[]" value="'.$parent_id.'"></td>
<td class="td<?php echo $even; ?>" width="15%"><input placeholder="Titel" class="inputTable" name="caption[]" value="'.$caption.'"></td>
<td class="td<?php echo $even; ?>" width="5%"><input placeholder="Icon" class="inputTable" name="icon_image[]" value="'.$icon_image.'"></td>
<td class="td<?php echo $even; ?>" width="5%"><select placeholder="Sichtbar" class="selectTable" name="visible[]"><option value="1">Sichtbar</option><option value="0">Nicht sichtbar</option></select></td>
<td class="td<?php echo $even; ?>" width="5%"><select placeholder="Aktiviert" class="selectTable" name="enabled[]"><option value="1">Aktiv</option><option value="0">Nicht aktiv</option></select></td>
<td class="td<?php echo $even; ?>" width="5%"><select placeholder="Mindest Rank" class="selectTable" name="min_rank[]"><option>1</option></select></td>
<td class="td<?php echo $even; ?>" width="5%"><select placeholder="VIP" class="selectTable" name="min_vip[]"><option value="1">Nur VIP</option><option value="0">Alle</option></select></td>
<td class="td<?php echo $even; ?>" width="5%"><input placeholder="Reihen Nummer" class="inputTable" name="order_num[]" value="'.$order_num.'"></td>
<td class="td<?php echo $even; ?>" width="10%"><input placeholder="Layout" class="inputTable" name="page_layout[]" value="'.$page_layout.'"></td>
</tr>
';
$index++;
}
echo '
<input class="save" type="submit" name="save" value="Speichern">
<br><br>
</form>
</table>
';
?>
<script>
$("#save").on("submit", function(event) {
event.preventDefault();
$.ajax({
type: "POST",
url: "./save.php",
data: $(this).serialize(),
success: function(data) {
if($('#result').css('display') == 'none') {
document.getElementById('result').style.display = 'block'
} else {
document.getElementById('result').style.display = 'none'
setTimeout(function() {
document.getElementById('result').style.display = 'block'
}, 100);
}
},
});
});
</script><?php
}
?>
save.php:
$size = count($_POST['id']);
$i = 0;
while ($i < $size)
{
$id = $_POST['id'][$i];
$query = "UPDATE catalog_pages SET id = '".$id."' LIMIT 1";
mysql_query($query) or die ("Error in query: $query");
++$i;
}
Like I said, everything is included. Database Connection, all fine.
It is also showing me the Response with the Select but then I want to Update that data - also with ajax.
Where do I have do place the Ajax Code? How can I do that?

insert jquery value to php variable

<script type="text/javascript">
$(document).ready(function(){
$("#t_select").change(function(){
var table_name = $("#t_select").val();
$.ajax({
type: 'POST',
url: 'index.php',
data: {"tabname": table_name},
success: function(data) {
console.log('Data send');
$("#display-property-address").html(data);
}
});
});
});
</script>
This my jquery code
<form name="stable" method="POST" id="form">
<select id="t_select">
<option value="agent_info">Agent info</option>
<option value="student_info">Student info</option>
</select>
</form>
my html code
<?php
if($_REQUEST['table_name'])
{
$val=$_REQUEST["table_name"];
echo $val;
}else{echo "nothing";}
?>
i want to get the option value from the select box using jquery on change event and i want to insert that value into PHP.

The variable you are sending from JS is called tabname.
This should fix it.
if($_REQUEST['tabname'])
{
$val=$_REQUEST["tabname"];
echo $val;
}else{echo "nothing";}

In ajax you have to use like
data: {"table_name": table_name},
instead of
data: {"tabname": table_name},

Thanks for the help friends,here is my solution
index.php
<script type="text/javascript">
$(document).ready(function()
{
$(".t_select").change(function()
{
//alert($('#t_select').val());
//var tabname = $('#t_select').val());
var table_name = $(this).val();
// alert(table_name);
$.ajax
({
type:"POST",
url: "data.php",
data: {tabname :table_name},
//cache: false,
success: function(html) {
console.log('Data send');
$("#display-property-address").html(html);
}
});
});
});
</script>
<select class="t_select" name="t_select">
<option value="agent_info">Agent info</option>
<option value="student_info">Student info</option>
</select>
<div id="display-property-address"></div>
data.php
<!DOCTYPE html>
<?php include 'db.php';?>
<html lang="en">
<head>
</head>
<body>
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Subject</th>
<th>Description</th>
<th>Unit</th>
<th>Semester</th>
</tr>
</thead>
<?php
//print_r('tabname');
echo $_POST['tabname'];
if($_POST['tabname'])
{
$val=$_POST['tabname'];
echo $val;
}else{echo "nothing";}
?>
<?php
$table_name = $_REQUEST['tabname'];
$SQLSELECT = "SELECT * FROM $table_name ";
$result_set = mysql_query($SQLSELECT, $conn);
while($row = mysql_fetch_array($result_set))
{
?>
<tr>
<td><?php echo $row['SUBJ_ID']; ?></td>
<td><?php echo $row['SUBJ_CODE']; ?></td>
<td><?php echo $row['SUBJ_DESCRIPTION']; ?></td>
<td><?php echo $row['UNIT']; ?></td>
<td><?php echo $row['SEMESTER']; ?></td>
</tr>
<?php
}
?>
</table>
</body>
</html>

Use $("#t_select option:selected").val();

Javascript comparison for a table row to highlight a row in red (CakePHP)

How do I find the right approach to getting this comparison to work? I've tried all kinds of approaches. I even used ids, but they don't respond. If I do this "gumboots" string check though, it does work. "gumboots" was just a value for a product name that existed somewhere on the table. This is how I know I do not need PHP at all for this, despite the tables displayed in PHP in the Index view below. Any idea? I would appreciate it.
Here's the javascript
$('#example tbody tr td').each(function()
{
//var p_no_in_stock = parseInt($('#p_no_in_stock')).val();
//var p_reorder_quantity = parseInt($('#p_reorder_quantity')).val();
var p_no_in_stock = parseInt(document.getElementById('p_no_in_stock')).value;
var p_reorder_quantity = parseInt(document.getElementById('p_reorder_quantity')).value;
//if ($product['Product']['p_no_in_stock'].val() < $product['Product']['p_reorder_quantity'].val())
if ($(this).text() == "gumboots")
//if ($(this).p_no_in_stock < $(this).p_reorder_quantity)
{
//$("#row_" +" td").effect("highlight", {}, 1500);
$(this).closest('tr').attr('style','background-color:red');
$(this).parent().css('background-color','red');
$(this).parent().attr('style','background-color:red');
$(this).parent().addClass('highlight');
$(this).parent().css('font-weight','bold');
}
});
And this is the application in a View called Products.index
<div class="active">
<h2><?php echo __('Products'); ?></h2>
<table cellpadding="0" cellspacing="0" class="table table-striped table-bordered" id ="example">
<tr>
<th><?php echo $this->Paginator->sort('p_name', 'Name'); ?></th>
<th><?php echo $this->Paginator->sort('category_name', 'Category'); ?></th>
<th><?php echo $this->Paginator->sort('p_no_in_stock','No. in Stock'); ?></th>
<th><?php echo $this->Paginator->sort('p_reorder_quantity', 'Re-order Quantity'); ?></th>
<th class="actions"><?php echo __('Actions'); ?></th>
</tr>
<tbody>
<?php foreach ($products as $product): ?>
<tr>
<td><?php echo h($product['Product']['p_name']); ?></td>
<td> <?php echo $this->Html->link($product['Category']['category_name'],
array('controller' => 'categories', 'action' => 'view', $product['Category']['id'])); ?>
</td>
<td id = "p_no_in_stock" type ="number" ><?php echo h($product['Product']['p_no_in_stock']); ?> </td>
<td id ="p_reorder_quantity" type ="number" ><?php echo h($product['Product']['p_reorder_quantity']); ?> </td>
<td class="actions">
<?php echo $this->Html->link(__('View'), array('action' => 'view', $product['Product']['id']), array('class' => 'btn btn-mini')); ?>
<?php echo $this->Html->link(__('Edit'), array('action' => 'edit', $product['Product']['id']), array('class' => 'btn btn-mini')); ?>
<?php echo $this->Form->postLink(__('Delete'), array('action' => 'delete', $product['Product']['id']), array('class' => 'btn btn-mini'), __('Are you sure you want to delete # %s?', $product['Product']['id'])); ?>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
Thanks in advance.

Is this what you're asking?
http://jsfiddle.net/SinisterSystems/z9SE7/1/
HTML:
<table>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
</table>
CSS:
tr:hover td {
background:#F00;
}

I am sending you mine code, please modify it accordingly....
The PHP Code is as -
<?php
if($num>0)
{
echo '<table width="100%" id="dep_table" style="margin-top:10px;" cellspacing="1" cellpadding="2" border="0">';
echo '<tr bgcolor="#4682B4">';
echo '<th>Editor</th>';
echo '<th>Department Id</th>';
echo '<th>Department Name</th>';
echo '</tr>';
$i=0;
while ($row = $stmt->fetch(PDO::FETCH_ASSOC))
{
$i++;
if($i % 2 == 0)
{
$bgcolor= "#6AA2C3";
}
else
{
$bgcolor= "#A2B5CD";
}
//extract row, this will make $row['firstname'] to just $firstname only
extract($row);
//creating new table row per record
echo "<tr bgcolor='$bgcolor' id='$DeptId' name='edit_tr'>";
echo '<td id="edit"><input id="edit" type="radio" name="deptid" value="DeptId" ?></td>';
echo "<td class='format'>{$row['DeptId']}</td>";
echo "<td class='format'>{$row['DeptName']}</td>";
echo "</tr>";
}
echo "</table>";
}
echo "</div>";
The JS for corresponding code is as -
$(document).ready(function() {
row_color();
$('#dep_table tr').click(function(e) {
$(this).find('td input:radio').prop('checked', true);
/* submit_fxn();
$('#form_ndesg').submit(function(e) {
return false;
});*/
});
});
//******* 1 Div Fade In/Out effect *******
function row_color(){
$('#dep_table tr').not(':first').hover(function(){
$(this).addClass('hover');
},function(){
$(this).removeClass('hover');
});
};
The corresponding CSS code is as -
tr.hover{
background-color:#E7ECB8;
color:#990000;
}
You will move your mouse on the table, it will change the row color as well as rwo text color and when you click on particular row, it will enable the row by selecting radio button..
If this answer is helpful for you then please like it for answer, so that others can use it for reference.... Thanks and best of luck