I set up a table that grabs information from a Mysql database and displays it quit nicely. However i would like the table "row" to change colors based off the aging of the account? Any simple easy ways of achieving this?
Home.php
<div class="row">
<div class="col-md-12">
<table class="table table-bordered table-striped table-responsive">
<tr class="header">
<td>Rep</td>
<td>Date</td>
<td>Name</td>
<td>P_O</td>
<td>Due Date</td>
<td>Terms</td>
<td>Aging</td>
<td>Open Balance</td>
</tr>
<?php
while($row = mysql_fetch_array($query)) {
$className ="";
if ($row['Aging'] >= 45)
{
$className="clsRedRow";
}
else if($row['Aging'] >= 25 && $row['Aging'] <= 44)
{
$className="clsYellowRow";
}
echo "<tr class='$className'>";
echo "<td>".$row[Rep]."</td>";
echo "<td>".$row[Date]."</td>";
echo "<td>".$row[Name]."</td>";
echo "<td>".$row[P_O]."</td>";
echo "<td>".$row[Due_Date]."</td>";
echo "<td>".$row[Terms]."</td>";
echo "<td>".$row[Aging]."</td>";
echo "<td>".$row[Open_Balance]."</td>";
}
?>
</table>
</div>
</div>
Try adding a class inline to the <tr> elements. Something like this:
<?php
while ($row = mysql_fetch_array($query))
{
$className = "";
if ($row['Aging'] < 50)
{
$className = "clsRedRow";
}
else
{
$className = "clsGreenRow";
}
echo "<tr class='$className'>";
echo "<td>" . $row[Rep] . "</td>";
echo "<td>" . $row[Date] . "</td>";
echo "<td>" . $row[Name] . "</td>";
echo "<td>" . $row[P_O] . "</td>";
echo "<td>" . $row[Due_Date] . "</td>";
echo "<td>" . $row[Terms] . "</td>";
echo "<td>" . $row[Aging] . "</td>";
echo "<td>" . $row[Open_Balance] . "</td>";
}
?>
Then, you'd need to have the proper styles set up in the HTML document (above the PHP script, not sure where the rest of your styles are set):
<style>
.clsRedRow{ background-color: red; }
.clsGreenRow{ background-color: green; }
</style>
I would probably add a class to the aging cells, and then iterate over them and check the value in a jQuery function to apply your styling based on the range the number falls in.
$("#some-table .aging").each(function() {
var age = $(this).html();
if (age <= 2) {
$(this).parent().css({"background-color" : "blue"});
} else if (age <= 5) {
$(this).parent().css({"background-color" : "yellow"});
} else if (age <= 8) {
$(this).parent().css({"background-color" : "red"});
}
});
Like this: http://codepen.io/jonathanrbowman/pen/epVBox
Related
I am trying to create a page to allow toggling on and off certain forums in website, created from raw data in an SQL server. However I need each to have an individual ID so I can show/hide them based on user preference. I am not sure how to go about it. Here is my existing code, disregard the connection values, I am hiding them on purpose. thanks.
$db_host = "host";
$db_username = "username";
$db_pass = "pass";
$db_name = "name";
$db = new PDO('mysql:host='.$db_host.';dbname='.$db_name,$db_username,$db_pass);
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_WARNING);
$query = $db->query('SELECT p.name, p.company, o.prodtype AS Type
FROM ownedproducts AS o
JOIN product as p ON p.productID = o.productID
WHERE o.usersID = 2');
?>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title> User Forum Selection </title>
</head>
<body>
<div>
<input type="text" id="userid">
</div>
<div>
<hr>
<table id=table border = '2'>
<tr id=table-row>
<th id=table-header>Name</th>
<th id=table-header>Company</th>
<th id=table-header>Type</th>
</tr>
<?php
while ($row = $query->fetch())
{
echo "<tr id=table-row >";
echo "<td>" . $row['name'] ."</td>";
echo "<td>" . $row['company'] . "</td>";
echo "<td>" . $row['Type'] . "</td>";
echo "</tr>";
}
?>
</table>
</div>
</body>
</html>
What about using the product id ? That sounds logical here.
Select it :
$query = $db->query('SELECT p.productID, p.name, p.company, o.prodtype AS Type ...
Then use it in your rows :
while ($row = $query->fetch())
{
echo "<tr id='table-row-" . $row['id'] . "' >";
echo "<td>" . $row['name'] ."</td>";
echo "<td>" . $row['company'] . "</td>";
echo "<td>" . $row['Type'] . "</td>";
echo "</tr>";
}
Always use single and double quote in id as (id=' ', id=" ")
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title> User Forum Selection </title>
</head>
<body>
<div>
<input type="text" id="userid">
</div>
<div>
<hr>
<table id=table border = '2'>
<tr id=table-row>
<th id=table-header>Name</th>
<th id=table-header>Company</th>
<th id=table-header>Type</th>
</tr>
<?php
while ($row = $query->fetch())
{
echo "<tr id=table-row >";
echo "<td>" . $row['name'] ."</td>";
echo "<td>" . $row['company'] . "</td>";
echo "<td>" . $row['Type'] . "</td>";
echo "</tr>";
}
?>
</table>
</div>
</body>
</html>
use it in your rows :
<?php
foreach( $query->fetch() as $rows=> $row)
{
echo "<tr id='table-row-'.$rows >";
echo "<td>" . $row[or</td>";
echo "<td>" . $row['company'] . "</td>";
echo "<td>" . $row['Type'] . "</td>";
echo "</tr>";
}
?>
I'd probably do it in a foreach and use the key.
foreach( $query->fetch() as $key => $row)
{
echo "<tr id='table-row-'.$key >";
echo "<td>" . $row['name'] ."</td>";
echo "<td>" . $row['company'] . "</td>";
echo "<td>" . $row['Type'] . "</td>";
echo "</tr>";
}
Based on my question, I want to display the content of the div (id = "content") with a text (Data is empty) when there is no data to retrieve from the database. What I know is to use javascript. But I am still new in this programming skill. Can anyone help me?
Below is my code
<div class="row" id = "content">
<div class="col-lg-12 grid-margin stretch-card">
<div class="card bg-light">
<div class="card-body double" style="height: 400px; overflow-y: scroll;">
<h4 class="card-title">All Booking</h4>
<table class="table table-bordered" >
<thead>
<tr>
<th>#</th>
<th>Requester</th>
<th>Factory</th>
<th>Room</th>
<th>Purpose</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody >
<?php
$query = $conn->query("SELECT * FROM booking LEFT JOIN room ON booking.Room_ID = room.Room_ID WHERE Admin_email = '$Email' AND EndTime > GETDATE() ORDER BY booking.Book_No DESC");
while($row = $query->fetch(PDO::FETCH_ASSOC)){
$status=$row['Book_Status'];
if($status=="Approve")
{
$color="color:green";
}
else if($status=="Pending")
{
$color="color:blue";
}
else
{
$color="color:red";
}
echo "<tr>";
echo "<td>" . $row['Book_No'] . "</td>";
echo "<td>" . $row['Requested_by'] . "</td>";
echo "<td>" . $row['Fac_ID'] . "</td>";
echo "<td>" . $row['Room_Desc'] . "</td>";
echo "<td>" . $row['Meeting_Description'] . "</td>";
echo "<td style='$color'><strong>" . $status ."</strong></td>";
echo "<td>";
echo "<a class='btn btn-primary btn-block' href='../view_booking/view_booking.php?Book_No=". $row['Book_No'] ."' title='View Booking' data-toggle='tooltip'>View</a>";
echo "</td>";
echo "</tr>";
}
?>
</tbody>
</table><br>
</div>
</div>
</div>
</div>
You can wrap your <div> tag inside a condition based on your SQL query.
Example:
$query = $conn->query("SELECT * FROM booking LEFT JOIN room ON booking.Room_ID = room.Room_ID WHERE Admin_email = '$Email' AND EndTime > GETDATE() ORDER BY booking.Book_No DESC");
$count = mysqli_num_rows($query); // if your query doesn't returns any error.
if($count > 0) { ?>
<div id=content> your all contents here </div>
<?php } else { ?>
<div id="content"> Data is empty </div>
<?php } ?>
This is the code, im trying to get the value of each TD with id=tel2 and checkbox is checked and store all values in textarea separated with Comma ','
Any suggestion ?
echo "<div>";
if ($result->num_rows > 0) {
echo "<table border='1' cellpadding='10'>";
echo "<tr> <th></th> <th>Nom</th> <th>Prenom</th> <th>Tel</th> <th>Classe</th> <th>Annee</th> </tr>";
while($row = $result->fetch_assoc()) {
echo "<tr>";
echo "<td> <input type=\"checkbox\" id=\"case\"></td>";
echo "<td>" . $row['nom'] . "</td>";
echo "<td>" . $row['prenom'] . "</td>";
echo "<td id=\"tel2\">" . $row['tel'] . "</td>";
echo "<td>" . $row['classe'] . "</td>";
echo "<td>" . $row['annee'] . "</td>";
echo "</tr>";
}
echo "</table>";
}
echo "</div>";
?>
i am retrieving some data from database and show them in a html table.but right now i am struggling with the following scenario.
if user clicks disable button it should be hide and enable button should be show.if user clicks on enable button it should be hide and disable button should be show.
Here is my code
<html>
<title></title>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$('input:submit').click(function(){
$('input:submit').attr("disabled", true);
});
</script>
</head>
<body>
<?php
echo "<table border='1' align='center' width='100%'>
<tr>
<th>ID</th>
<th>Image</th>
<th>Modified Date</th>
<th>URL</th>
<th>Clicks</th>
<th>Status</th>
<th>Action</th>
</tr>";
while($row = mysqli_fetch_array($query))
{
$id = $row['img_id'];
echo "<tr>";
echo "<td align='center'>" . $row['img_id'] . "</td>";
echo "<td align='center' width='500px'>" . '<img width = 200px; height=100px; src=" '. ($row['img_path']) . '"/>'. "</td>";
echo "<td align='center' width='350px'>" . $row['date'] . "</td>";
echo "<td align='center'>" . $row['url'] . "</td>";
echo "<td align='center'>" . $row['clicks'] . "</td>";
echo "<td align='center'>" . $row['status'] . "</td>";
echo "<td align='center'><a href='image_update.php?id=$id'><button>Update</button></a>
<form method='post' >
<input type='hidden' name='tid' value='$id'/>
<input type='submit' name='disable' id='disable' value='Disable'>
<input type='submit' name='enable' id='enable' value='Enable'>
</form>
</td>";
$id = $_POST['tid'];
if($_SERVER['REQUEST_METHOD']=='POST') {
$sql = "UPDATE advertisementnew SET status = 'Disabled' WHERE img_id='$id'";
mysqli_query($con, $sql);
}
echo "</tr>";
}
echo "</table>";
try this js:
$('#enable').css("display", "none");
$('#disable').click(function(){
$('#enable').css("display", "block");
$('#disable').css("display", "none");
});
instead of:
$('input:submit').click(function(){
$('input:submit').attr("disabled", true);
});
can you try this hope this is works
<script type = "text/javascript" >
$('input:submit').click(function () {
var check = $(this).attr('id');
if (check == 'disable') {
$('#enable').show();
$('#disable').hide();
}
if (check == 'enable') {
$('#disable').show();
$('#enable').hide();
}
});
</script>
You can have class
.hide-show{
display : none;
}
HTML :
<input type='submit' name='disable' id='disable' value='Disable' class="enable-disable-btn">
<input type='submit' name='enable' id='enable' value='Enable' class="enable-disable-btn hide-show">
Initially put the hide-show class on the button which should be need to hide.
Add class enable-disable-btn to both button enabled/disbaled
JS:
You can use jQuery#toggleClass
$(".enable-disable-btn").on('click',function(){
$(".enable-disable-btn").toggleClass('hide-show')
})
You need to add unique id dynamically created in while loop in your case id is not unique
for this
changes in php replace these two lines
<input type='submit' onclick='doEnableDesable(this)' name='disable' id='disable".$id."' value='Disable'>
<input type='submit' onclick='doEnableDesable(this)' name='enable' id='enable".$id."' value='Enable'>
And in javascript define function for dynamic Id
function doEnableDesable(params)
{
if (params.value == 'disable') {
$('#'+params.id).show();
$('#'+params.id).hide();
}
if (params.value == 'enable') {
$('#'+params.id).show();
$('#'+params.id).hide();
}
}
I have two tables on one page. The table at the top only has one row, because that particular table in the DB will only ever have one entry, the Tank of the Month. The bottom table shows the contents of another table in the database, 'uploads'. When an item is deleted from the bottom table, it deletes it from the DB and from the physical /uploads/ folder as expected. When an item is chosen from the bottom table as Tank of the Month, it is supposed to disappear from the bottom table, which it does correctly, then the top table is supposed to clear and the item that was chosen should automatically fade into the top table. I have tried many, many ways of doing this with no luck so far. The only way I can get the top table to refresh is by actually refreshing the page. This does what I want, but I want to do it without the page refresh.
totm.php (not the whole file as most of it works):
<!--put body stuff here-->
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card card-plain">
<div class="header">
<h4 class="title">Current Tank of the Month</h4>
<p class="category">This is your current tank of the month. </p>
</div>
<div class="content table-responsive table-full-width">
<?php
// Check connection
if ($mysqli->connect_error) {
die("Connection failed: " . $mysqli->connect_error);
}
else
{
if (!$stmt = $mysqli->query("SELECT * FROM totm")) {
echo "Query Failed!: (" . $mysqli->errno . ") ". $mysqli->error;
}
echo "<table class='table table-hover'>";
echo "<thead>
<th>Image</th>
<th>Filename</th>
<th>Description</th>
</thead>
<tbody>";
while ($row = mysqli_fetch_array($stmt)) {
$i = $row["id"];
$f = $row["file"];
$d = $row["description"];
echo "<tr id='$i' file='$f' desc='$d'>";
echo "<td> <a href='../assets/img/totm/" . $row["file"] . "'><img class='thumbnail' src='../assets/img/totm/" . $row["file"] . "' alt='" . $row["file"] . "' /> </td>";
echo "<td>" . $row["file"] . "</td>";
echo "<td>" . $row["description"] . "</td>";
echo "</tr>";
}
echo "</tbody>";
echo "</table>";
if (mysqli_num_rows($stmt) == 0) {
echo "No records found.";
}
}
$stmt->free();
//$mysqli->close();
?>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card card-plain">
<div class="header">
<h4 class="title">Current Entries</h4>
<p class="category">Here you will find the current entries for the Tank of the Month contest. Select one as the new Tank of The Month and delete the rest. Keep it clean around here! </p>
</div>
<div class="content table-responsive table-full-width">
<?php
// Check connection
if ($mysqli->connect_error) {
die("Connection failed: " . $mysqli->connect_error);
}
else
{
if (!$stmt = $mysqli->query("SELECT * FROM uploads")) {
echo "Query Failed!: (" . $mysqli->errno . ") ". $mysqli->error;
}
echo "<table class='table table-hover'>";
echo "<thead>
<th>Image</th>
<th>Name</th>
<th>Email</th>
<th>IP</th>
<th>Date</th>
<th>Description</th>
<th>Action</th>
</thead>
<tbody>";
while ($row = mysqli_fetch_array($stmt)) {
$i = $row["id"];
$f = $row["file"];
$d = $row["description"];
echo "<tr id='$i' file='$f' desc='$d'>";
echo "<td> <a href='../uploads/" . $row["file"] . "'><img class='thumbnail' src='../uploads/" . $row["file"] . "' alt='" . $row["file"] . "' /> </td>";
echo "<td>" . $row["name"] . "</td>";
echo "<td>" . $row["email"] . "</td>";
echo "<td>" . $row["ip"] . "</td>";
echo "<td>" . $row["date"] . "</td>";
echo "<td>" . $row["description"] . "</td>";
echo "<td>
<button class='btn btn-round btn-danger deleteitem'>Delete</button>
<div class='space-20'></div>
<button class='btn btn-round btn-success chooseitem'>Select</button>
</td>";
echo "</tr>";
}
echo "</tbody>";
echo "</table>";
if (mysqli_num_rows($stmt) == 0) {
echo "No records found.";
}
}
$stmt->free();
$mysqli->close();
?>
</div>
</div>
</div>
</div>
</div>
</div>
totm-backend.js:
$(".deleteitem").click(function () {
var parent = $(this).closest('TR');
var id = parent.attr('id');
var file = parent.attr('file');
if (confirm("Are you sure you want to delete this?")) {
$.ajax({
type: "POST",
data: { delete_id: id, delete_file : file },
URL: "totm.php",
success: function (msg) {
parent.fadeOut('slow', function () { $('#' + id).remove() });
}
});
}
return false;
});
$(".chooseitem").click(function () {
var parent = $(this).closest('tr');
var id = parent.attr('id');
var file = parent.attr('file');
var desc = parent.attr('desc');
if (confirm("Are you sure you want to promote this to Tank of the Month?")) {
$.ajax({
type: "POST",
data: { promote_id: id, promote_file: file, promote_desc: desc },
URL: "totm.php",
success: function (msg) {
parent.fadeOut('slow', function () { $('#' + id).remove() });
}
});
}
return false;
});
You could use the appendTo function to append the item into the proper table.
Check this post out on how to do it.
To get the "current" table, check out hasClass
I'm just learning javascript and jquery myself so there may be better ways.