I need to Highlight columns that have different values.
If the value on $b['nama'] and $c['nama'] is not the same i need to highlight the <tr>. I wanted the system admin to easily see which of the field is having different values so the admin can decide to approve user edit request or to reject the request.
<?php
error_reporting(0);
$b = $data->row_array();
$c = $data2->row_array();
?>
<!-- Begin Page Content -->
<div class="container-fluid">
<!-- DataTales Example -->
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">User requested changes</h6>
</div>
<div class="card-body">
<table id="tabel" class="table table-bordered table-striped" style="width: 75%">
<thead>
<tr>
<th>Variable</th>
<th>Current data</th>
<th>Requested changes</th>
</tr>
</thead>
<tbody>
<tr>
<td>Nama</td>
<td>
<?php echo $b['nama']; ?>
</td>
<td>
<?php echo $c['nama']; ?>
</td>
</tr>
<tr>
<td>NIP Baru</td>
<td>
<?php echo $b['nipBaru']; ?>
</td>
<td>
<?php echo $c['nipBaru']; ?>
</td>
</tr>
<tr>
<td>NIP lama</td>
<td>
<?php echo $b['nipLama']; ?>
</td>
<td>
<?php echo $c['nipLama']; ?>
</td>
</tr>
<tr>
<td>Gelar depan</td>
<td>
<?php echo $b['gelarDepan']; ?>
</td>
<td>
<?php echo $c['gelarDepan']; ?>
</td>
</tr>
<tr>
<td>Gelar belakang</td>
<td>
<?php echo $b['gelarBelakang']; ?>
</td>
<td>
<?php echo $c['gelarBelakang']; ?>
</td>
</tr>
<tr>
<td>Tempat lahir</td>
<td>
<?php echo $b['tempatLahir']; ?>
</td>
<td>
<?php echo $c['tempatLahir']; ?>
</td>
</tr>
</tbody>
</table>
<button type="submit" class="btn btn-primary btn-sm" style="width:10%"><span class="icon-cursor"></span> Approve</button>
<button type="submit" class="btn btn-primary btn-sm" style="width:10%"><span class="icon-cursor"></span> Reject</button>
</div>
</div>
</div>
Check if those two values are different and apply a class to the row
<tr<?php if ($b['nama'] != $c['nama']) { echo ' class="highlight"'; } ?>>
<td>Nama</td>
<td>
<?php echo $b['nama']; ?>
</td>
<td>
<?php echo $c['nama']; ?>
</td>
</tr>
then use CSS to highlight the cells
.highlight td {
background: yellowgreen;
}
try this code
you can change the bgcolor value or you can create css class and inside of if you echo the class='my_class'
<?php
error_reporting(0);
$b = $data->row_array();
$c = $data2->row_array();
?>
<!-- Begin Page Content -->
<div class="container-fluid">
<!-- DataTales Example -->
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">User requested changes</h6>
</div>
<div class="card-body">
<table id="tabel" class="table table-bordered table-striped" style="width: 75%">
<thead>
<tr>
<th>Variable</th>
<th>Current data</th>
<th>Requested changes</th>
</tr>
</thead>
<tbody>
<tr <?php if ($b['nama'] != $c['nama']){echo "bgcolor='#FF0000'";} ?>>
<td>Nama</td>
<td>
<?php echo $b['nama']; ?>
</td>
<td>
<?php echo $c['nama']; ?>
</td>
</tr>
<tr <?php if ($b['nipBaru'] != $c['nipBaru']){echo "bgcolor='#FF0000'";} ?> >
<td>NIP Baru</td>
<td>
<?php echo $b['nipBaru']; ?>
</td>
<td>
<?php echo $c['nipBaru']; ?>
</td>
</tr>
<tr <?php if ($b['nipBaru'] != $c['nipBaru']){echo "bgcolor='#FF0000'";} ?> >
<td>NIP lama</td>
<td>
<?php echo $b['nipLama']; ?>
</td>
<td>
<?php echo $c['nipLama']; ?>
</td>
</tr>
<tr <?php if ($b['gelarDepan'] != $c['gelarDepan']){echo "bgcolor='#FF0000'";} ?> >
<td>Gelar depan</td>
<td>
<?php echo $b['gelarDepan']; ?>
</td>
<td>
<?php echo $c['gelarDepan']; ?>
</td>
</tr>
<tr <?php if ($b['gelarBelakang'] != $c['gelarBelakang']){echo "bgcolor='#FF0000'";} ?> >
<td>Gelar belakang</td>
<td>
<?php echo $b['gelarBelakang']; ?>
</td>
<td>
<?php echo $c['gelarBelakang']; ?>
</td>
</tr>
<tr <?php if ($b['tempatLahir'] != $c['tempatLahir']){echo "bgcolor='#FF0000'";} ?> >
<td>Tempat lahir</td>
<td>
<?php echo $b['tempatLahir']; ?>
</td>
<td>
<?php echo $c['tempatLahir']; ?>
</td>
</tr>
</tbody>
</table>
<button type="submit" class="btn btn-primary btn-sm" style="width:10%"><span class="icon-cursor"></span> Approve</button>
<button type="submit" class="btn btn-primary btn-sm" style="width:10%"><span class="icon-cursor"></span> Reject</button>
</div>
</div>
</div>
You can define a class named 'same' and 'different'. Then in php check if the values are same and echo the class property based on being same or different.
php
<tr>
<td>Nama</td>
<td class="<?php echo ($b['nama'] == $c['nama'])? 'same': 'different'; ">
<?php echo $b['nama']; ?>
</td>
<td class="<?php echo ($b['nama'] == $c['nama'])? 'same': 'different'; ">
<?php echo $c['nama']; ?>
</td>
</tr>
In Styles
.same{
color:green;
}
.different{
color:red;
}
We have used ternary operator to figure out if the variables are same or not.
https://www.abeautifulsite.net/how-to-use-the-php-ternary-operator
Since you seem to be using Bootstrap, you could just apply an already defined style to the cells to highlight the difference. For instance:
<tr>
<td>Nama</td>
<td class="<?php echo ($b['nama'] == $c['nama'])? 'bg-success': 'bg-danger'; ">
<?php echo $b['nama']; ?>
</td>
<td class="bg-<?php echo ($b['nama'] == $c['nama'])? 'bg-success': 'bg-danger'; ">
<?php echo $c['nama']; ?>
</td>
</tr>
By doing this, if $b['nama'] and $c['nama'] are different, the cells would have an near-red background and if they are equal, they'd have a near-green background. If you'd like to only highlight differences (in order to make the screen less overwhelming, just replace the 'bg-success' with '' so the equal cells don't get styled
Related
I have a table created dynamically with PHP to display requests. In each row of my table there is a button to open a popup. The ID of each request should be transferred to this popup in order to read out all data.
How can I make it so that in a dynamic table (all button names are the same) each button is differentiated, or recognized which button I pressed? And how can I pass the variable from PHP to the popup via javascript?
I would appreciate any help, I've been trying for days now, but I'm not getting any results.
Here's the table view
Popup window
<table id="meineTabelle" data-role="table" class="content"
data-mode="columntoggle" data-column-btn-text="Spalten">
<thead>
<div class="tablehead">
<tr>
<th class="thblackborder" data-priority=""></th>
<th class="thblackborder" data-priority="">1.Projektant</th>
<th class="thblackborder" data-priority=""></th>
<th class="thblackborder" data-priority="">2.Projektant</th>
<th class="thblackborder" data-priority=""></th>
<th class="thblackborder" data-priority="">3.Projektant</th>
<th class="thblackborder" data-priority=""></th>
<th class="thblackborder" data-priority="">4.Projektant</th>
<th class="thblackborder" data-priority=""></th>
<tr>
<th class="">ID</th>
<th class="">Vorname</th>
<th class="">Nachname</th>
<th class="">Vorname</th>
<th class="">Nachname</th>
<th class="">Vorname</th>
<th class="">Nachname</th>
<th class="">Vorname</th>
<th class="">Nachname</th>
<th class="">Titel</th>
<th class="">Standort</th>
<th class="">Klasse</th>
<th class="">Beginn</th>
<th class="">Abgabe</th>
<th class="">Beschreibung</th>
<th class="">Status</th>
<th class="">Erstellt</th>
</tr>
</tr>
</div>
</thead>
<tbody>
<?php
foreach ($Ausgabe as $row) {
?>
<form>
<tr onclick="dialogOeffnen('loslegen-dialog')">
<td>
<?php echo $row["ID"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Vorname"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Nachname"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Vorname2"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Nachname2"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Vorname3"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Nachname3"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Vorname4"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Nachname4"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Titel"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Standort"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Klasse"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Beginn"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Abgabe"] . "<br>"; ?>
</td>
<td>
<center>Link</center>
</td>
<td>
<?php echo $row["Genehmigt"] . "<br>"; ?>
</td>
<td>
<?php echo $row["Erstellt"] . "<br>"; ?>
</td>
<td>
<input type="button" value="" onclick="">
</td>
</tr>
</form>
<?php
}
?>
</tbody>
</table>
Popup HTML
<div id="body-overlay"></div>
<div class="dialog" id="loslegen-dialog">
<a href="#" role="button" class="dialog-schließen-button" onclick="dialogSchliessen('loslegen-dialog')">
<i class="fas fa-times"></i>
</a>
<div class="textarea">
<h1><?php echo $row['ID'] ?></h1>
<textarea placeholder="Platz für Bemerkungen" name="Bemerkungen" id="" cols="30" rows="10"></textarea>
</div>
<form classaction="">
<div class="txt_field">
<input type="text" name="email" value="<?= $fetch_profile['email'];?>" required>
<span></span>
<label>E-Mail</label>
</div>
<div class="txt_field">
<input type="text" name="password" required>
<span></span>
<label>Passwort</label>
</div>
<input type="submit" value="Bestätigen" name="submit">
<div class="signup_link">
</form>
</div>
<script src="dialoge.js">
</script>
<script>
</script>
</body>
</html>
</body>
</html>
dialoge.js
function dialogOeffnen(dialogId) {
document.getElementById(dialogId).classList.add("sichtbar");
document.getElementById("body-overlay").classList.add("sichtbar");
}
function dialogSchliessen(dialogId) {
document.getElementById(dialogId).classList.remove("sichtbar");
document.getElementById("body-overlay").classList.remove("sichtbar");
}
If I echo out $row["ID"] for sure it shows me the last ID in my table
First, let's clean up your HTML a bit. Tables have predetermined structures. That means that a only some elements can be used as a parent or child. For example, you can't nest a <tr> inside a another <tr>. Learn about the basics of tables.
<table id="meineTabelle" data-role="table" class="content" data-mode="columntoggle" data-column-btn-text="Spalten">
<thead>
<tr>
<th>ID</th>
<th>Vorname</th>
<th>Nachname</th>
<th>Vorname</th>
<th>Nachname</th>
<th>Vorname</th>
<th>Nachname</th>
<th>Vorname</th>
<th>Nachname</th>
<th>Titel</th>
<th>Standort</th>
<th>Klasse</th>
<th>Beginn</th>
<th>Abgabe</th>
<th>Beschreibung</th>
<th>Status</th>
<th>Erstellt</th>
</tr>
</thead>
<tbody>
<?php foreach ($Ausgabe as $row) : ?>
<tr>
<td><?= $row["ID"] ?></td>
<td><?= $row["Vorname"] ?></td>
<td><?= $row["Nachname"] ?></td>
<td><?= $row["Vorname2"] ?></td>
<td><?= $row["Nachname2"] ?></td>
<td><?= $row["Vorname3"] ?></td>
<td><?= $row["Nachname3"] ?></td>
<td><?= $row["Vorname4"] ?></td>
<td><?= $row["Nachname4"] ?></td>
<td><?= $row["Titel"] ?></td>
<td><?= $row["Standort"] ?></td>
<td><?= $row["Klasse"] ?></td>
<td><?= $row["Beginn"] ?></td>
<td><?= $row["Abgabe"] ?></td>
<td>Link</td>
<td><?= $row["Genehmigt"] ?></td>
<td><?= $row["Erstellt"] ?></td>
<td>
<button class="dialog-open" type="button" value="<?= $row["ID"] ?>">Button</button>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
I've changed your button to a <button> element because it's a bit more flexible to use. Output the ID of the row in the value attribute. Give the button a class value to identify it with. We'll need this for JS.
Select the table in JavaScript. Listen for click events that happen within the table. The code below checks if the clicked element (event.target) is a button with the class we gave it. If it is, then we'll read the value from button and pass it to the open modal function.
const table = document.querySelector('#meinTabelle');
table.addEventListener('click', event => {
if (event.target.matches('.dialog-open') {
const dialogId = event.target.value;
dialogOeffnen(dialogId);
}
});
function dialogOeffnen(dialogId) {
document.getElementById(dialogId).classList.add("sichtbar");
document.getElementById("body-overlay").classList.add("sichtbar");
}
<div class="col-md-6 hidden-xm hidden-sm">
<div class="col-md-12 hidden-xm"><h3>ההזמנה שלך</h3></div>
<div class="col-md-12 hidden-xm">
<div class="table-responsive hidden-xm">
<table class="table table-default">
<thead>
<tr>
<th class="text-right">סה"כ</th>
<th class="text-right">מוצר</th>
</tr>
</thead>
<tbody>
<?php
$totalPrice = 0;
$arr = [];
foreach($_SESSION['cart'] as $product){
$productDetails = get_product($product['id']);
array_push($arr,$product['amount']." x".$productDetails->get_name());
$totalPrice+= $productDetails->get_price()*$product['amount'];
?>
<tr>
<td class="text-right"> <?php echo $productDetails->get_price()*$product['amount']; ?>$</td>
<td class="text-right"><?php echo $productDetails->get_name()." <b>".$product['amount']."x</b>"; ?></td>
</tr>
<?php };?>
<tr>
<td class="total_price">משלוח</td>
<td>9$</td>
</tr>
<tr>
<td class="text-right total_price">סה"כ</td>
<td class="text-right"> <?php echo $totalPrice+9 ?>$</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-12 hidden-xm text-right"> אחריות מלאה על המוצרים ל-28 יום</div>
<input type="hidden" name="products" value="<?php echo implode("<br>",$arr) ?>">
<div class="text-left">
<input type="submit" name="submit" class="btn btn-lg btn-pay" value="שליחת הזמנה">
</div>
</div>
</div>
I've tried for pretty long time to find out why the : hidden-xm/hidden-sm not working for me. Can someone tell me what am i doing wrong?
also I want to notice that this div is inside a bigger container but I want to hide it if its at a mobile point of view.
I'ts hidden-xs instead of hidden-xm
As far as I know this code must work but I when I coded it it does not work
The problem is that the form does not submit. How can I solve this ?
I don't even get the value of the checkbox when checked .
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<th>ID</th>
<th>Item Photo</th>
<th>Item Name</th>
<th>Stocks</th>
<th>Date Posted</th>
<th>Price</th>
<th>Actions</th>
</thead>
<tbody>
<form action ="<?php echo base_url()?>Shop/test" method="POST">
<?php
$x=1;
foreach($shop_items as $key)
{
?>
<tr>
<td><input class="checkbox" type="checkbox" name="cb[]" value="<?php $key->shop_item_id?>"> <?php echo $x;?> </td>
<td><center><img src="<?php echo base_url()?>uploads/items_main/<?php echo $key->shop_item_main_pic;?>" style = "width:60px;height:50px;"alt=""></center></td>
<td><?php echo mb_strimwidth($key->shop_item_name, 0, 18,"...");?></td>
<td style="width:10px;"><center><button><span class="fa fa-eye"></span></button></center></td>
<td><?php echo date('F,d,Y',strtotime($key->shop_item_date_posted))?></td>
<td><?php if(!$key->shop_item_sale){ echo number_format($key->shop_item_orig_price);}
else{ echo "<font color='red'>".number_format(intval($key->shop_item_orig_price-($key->shop_item_orig_price*($key->shop_item_sale/100))))."</font> ";}?></td>
<td>
Bid | View
</td>
</tr>
<?php
$x+=1;
}
?>
<button class='btn btn-danger btn-xs' type="submit" name="delete" value="delete"><span class="fa fa-times"></span> delete</button>
</form>
</tbody>
In the Controller, the structure is like this
if(isset($_POST['delete']))
{
if (isset($_POST["cb"])) {
// Checkbox is checked.
$cb = $_POST["cb"];
echo $cb;
}
else {
$cb = $_POST["cb"];
echo $cb;
}
}
If you emit all the PHP you are left with bad HTML:
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<th>ID</th>
</thead>
<tbody>
<form action="<?php echo base_url() ?>Shop/test" method="POST">
<tr>
<td>
<input class="checkbox" type="checkbox" name="cb[]" value="<?php $key->shop_item_id ?>"> <?php echo $x; ?>
</td>
</tr>
<button class='btn btn-danger btn-xs' type="submit" name="delete" value="delete">
<span class="fa fa-times"></span> delete
</button>
</form>
</tbody>
</table>
form shoul not be a child of tbody. Any content in a table should be inside th or td tags. You should place the form outside of the table and the button inside td tags:
<form action="<?php echo base_url() ?>Shop/test" method="POST">
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<th>ID</th>
</thead>
<tbody>
<tr>
<td>
<input class="checkbox" type="checkbox" name="cb[]" value="<?php $key->shop_item_id ?>"> <?php echo $x; ?>
</td>
</tr>
<tr>
<td>
<button class='btn btn-danger btn-xs' type="submit" name="delete" value="delete">
<span class="fa fa-times"></span> delete
</button>
</td>
</tr>
</tbody>
</table>
</form>
I want to the pass ID value to POPUP DIV and update into table with status , suggest_text area with ID.
if I pass like this href="#pop1?id=<?php echo $row['id']; ?> The POPUP div is Not opening. so I dont know how to pass,so some one tell me that how can I pass in PHP or else in Javascript
Thanks in advance
<div class="widget-content">
<table class="table table-bordered table-striped data-table">
<thead>
<tr>
<th>S.No</th>
<th>Employee Name</th>
<th>Reason</th>
<th>Category</th>
<th>From</th>
<th>To</th>
<th>No Of Days</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
$result=mysql_query("select * from leave_request");
while($row=mysql_fetch_array($result))
{?>
<tr>
<td><?php echo $row['id'];?></td>
<td> <?php echo $row['emp_name'];?></td>
<td> <?php echo $row['reason'];?></td>
<td> <?php echo $row['category'];?></td>
<td><?php echo $row['from_date'];?></td>
<td><?php echo $row['to_date'];?></td>
<td><?php echo $row['no_of_days'];?></td>
<td>
Accept |
Reject |
Suggest </td>
<div id="pop1" class="pop-up">
<?php $suggest_id = $_GET['id']; ?>
<div class="popBox">
<div class="popScroll">
<form>
<textarea name="suggest" id="suggest" cols="60" rows="8" ></textarea>
<input type="text" name="id" value="<?php echo $suggest_id; ?>">
<input type="text" name="status" value="3">
<button type="submit" name="submit" class="btn btn-primary">Submit</button>
</form>
<!-- popup content end here -->
</div>
<span>Back to links</span>
</div>
Back to links
</div>
</tr>
<?php }?>
</tbody>
</table>
</div>
As I see your popup div is in WHILE loop so you can get your id like this :-
Initialize a value say K = 1; and put this value to every popup
Suggest
Full Code :-
<?php
$result=mysql_query("select * from leave_request");
while($row=mysql_fetch_array($result))
{
$k =1;
?>
<tr>
<td><?php echo $row['id'];?></td>
<td> <?php echo $row['emp_name'];?></td>
<td> <?php echo $row['reason'];?></td>
<td> <?php echo $row['category'];?></td>
<td><?php echo $row['from_date'];?></td>
<td><?php echo $row['to_date'];?></td>
<td><?php echo $row['no_of_days'];?></td>
<td>
Accept |
Reject |
Suggest </td>
<div id="pop<?php echo $k; ?>" class="pop-up">
<div class="popBox">
<div class="popScroll">
<form>
<textarea name="suggest" id="suggest" cols="60" rows="8" ></textarea>
<input type="text" name="id" value="<?php echo $row['id']">
<input type="text" name="status" value="3">
<button type="submit" name="submit" class="btn btn-primary">Submit</button>
</form>
<!-- popup content end here -->
</div>
<span>Back to links</span>
</div>
Back to links
</div>
</tr>
<?php
$k++;
}?>
Help! I can't edit the other rows on my table
here is my script.. and it's working. but only on the first row.
<script>
function showInput(e)
{
document.getElementById(e.id).type = "text";
document.getElementById(e.id).focus();
}
</script>
and here is my table. coming from my database.
<table class="table table-bordered">
<tr class="green">
<th>Job Title</th>
<th>Job Description</th>
<th colspan="2">actions</th>
</tr>
<?php foreach ($fill_data as $row): ?>enter code here
<tr>
<td>
<?php echo $row['title'];?>
<div style="position:absolute; margin-top:-20px; margin-left:4px;">
<input type="hidden" id="<?php echo $row['title'];?>" name="<?php echo $row['title'];?>" value="<?php echo $row['title'];?>">
</div>
</td>
<td><?php echo $row['description'];?></td>
<td width="40px"><img src="<?php echo base_url(); ?>images/edit1.png" width="30" height="30" title="Edit" onclick="showInput(<?php echo $row['title'];?>)" style="cursor: pointer"></td>
<td><img data-toggle="modal" data-id="<?php echo $row['id']?>" class="delete-data" href="#delete" style="margin-top: 5px; cursor:pointer" height="15" width="15" src="<?php echo base_url(); ?>images/remove.gif"></td>
</tr>
<?php endforeach?>
</table>
the $rows comes from my database.
I guess it is because
<?php endforeach?>
should be
<?php endforeach; ?>
Try to use { brackets instead, like this
foreach (something) {
//Code
}