Develop Reference

Change color by state of attribute. HTML, Javascript

I need help.
I am developing a web application to register lost objects.
Missing objects are displayed on a table. Objects have an attribute equal to 0 for not delivered.
When it is delivered it goes to the value of the attribute equal to 1.
I would like to highlight the lines of objects already delivered (with the attribute equal to 1) for example with the green background color.
My table:
<tr>
<th scope="col">Description of objects </th>
<th scope="col">local</th>
<th scope="col"> who find ?</th>
<th scope="col">With value of without value</th>
<th scope="col">Destination actualy</th>
<th scope="col">When it has found</th>
<th scope="col">When is has delivery</th>
<th scope="col"> State of objects</th>
<th scope="col"> Ações </th>
</tr>
Now part with PHP 7 with Mysql
$rs = $connection->prepare("SELECT * FROM Perdidos");
$rs_users = $connection->prepare("SELECT * FROM users");
$registro_users = $rs_users->fetch(PDO::FETCH_OBJ);
if($rs->execute() and $rs_users->execute())
{
while($registro = $rs->fetch(PDO::FETCH_OBJ))
{
echo "<td>" . $registro->description_Perdidos. "</td>";
echo "<td>" . $registro->local_Perdidos. "</td>";
echo "<td>" . $registro->whoFind_Perdidos. "</td>";
echo "<td>" . $registro->withValueOrWithOutValue_Perdidos. </td>";
echo "<TD>" . $registro->destinationActualy_Perdidos . "</TD>";
echo "<TD>" . $registro->WhenIsHasFound_Perdidos. "</TD>";
echo "<TD>" . $registro->WhenIsHasDelivery_Perdidos . "</TD>";
echo "<TD>" . $registro->stateOfObjects . "</TD>";
echo "<TD>";
echo "</TD>";
echo "";

Add data-attr property at each row level which is mapped with your object attribute(0 or 1) and you can apply the style using below example:
$('#tableId').find('tr[data-attr="1"]').css("background-color", "green")

First thing - I think you are missing a <tr> tag around your <td> elements inside your while loop.
Inside your while loop you could check if the item is delivered. If so - put class='delivered' on the <tr>
Then using CSS you can style the rows which have the class 'delivered' like this:
.delivered {
background: #eee
}

Filtering tables with Javascript [PHP/SQL]

So I have an SQL query which pulls all data from a mysql table, called example:
function get_example($conn){
$statement = "SELECT * FROM `example`";
if ($result = $conn->query($statement)) {
$rows = array();
while($row = $result->fetch_array()){
$rows[] = $row;
}
return $rows;
} else {
return 0;
}
}
I call this function in PHP and store the value in $example. I can then use a foreach to create a table of everything:
<table>
<tr>
<td>ID</td>
<td>Name</td>
<td>Description</td>
</tr>
<?php
foreach($example as $entry){
echo "<tr>";
echo "<td>" . $entry['id'] . "</td>";
echo "<td>" . $entry['name'] . "</td>";
echo "<td>" . $entry['description'] . "</td>";
echo "</tr>";
}
?>
</table>
This is all simple enough and I can use a form with method POST to choose a value and filter the table accordingly (for eg, only show entires where the description field is a certain value).
My question is, how do I filter this table using JS?
I would want to have html buttons which, when clicked, call a function which changes the relevant tags css property for visibility from hidden to visible.
So - by default every tag is listed int he table with visibility proeprty set to hidden. Then, when certain elements are clicked, the associated elements are set to visible.
Is this possible? My JS knowledge is limited so the more I look into it, the more it seems the PHP form may be the ssafest way to go
Thanks

If you want the Filtering in your table with the help of JavaScript. the i suggest Datatables for it.
DataTables:
DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table.
You Can find More Example on datatables here
HTML
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<?php
foreach($example as $entry){
<tr>
<td><?php $entry['id']; ?></td>
<td><?php $entry['name']; ?></td>
<td><?php $entry['description']; ?></td>
</tr>
}
?>
</tbody>
</table>
Js
$(document).ready(function() {
$('#example').DataTable();
});
Add this cdn links to your page
https://code.jquery.com/jquery-1.12.0.min.js
https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js
https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css

If you choose to filter objetcs client-side using javascript you could use array.filter() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
or the usefull library underscorejs http://underscorejs.org/

Bootstrap table pagination with MySQL and PHP

I have a mysql database which is selecting results where $name = kicked,
this returns several results (usually 50+)
I do not know how to paginate the results - help?
This is the code for my table:
<div class="tab-pane" id="2">
<br>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Kicker</th>
<th>Kick Reason</th>
</tr>
</thead>
<tbody id="myTable">
<?php
$kicks = mysql_query("select * from Kicks where kicked = '$name'");
while($row = mysql_fetch_array($kicks))
{
echo "<tr>";
echo "<td>" . $row['kicker'] . "</td>";
echo "<td>" . $row['reason'] . "</td>";
echo "</tr>";
} ?>
</tbody>
</table>
<ul class="pagination pagination-lg pager" id="myPager"></ul>
</div>

You should look into using the Mysql LIMIT clause. It allows you to select x elements from your table starting at offset y. The offset can be determined by passing a page number parameter to your page.
Pseudo code:
.../page.php?pagenumber=2
$iPerPage = 10;
$iOffset = (pagenumber - 1) * $iPerPage;
SELECT ... FROM `kicks` LIMIT $iOffset, $iPerPage;
See this link

How to call a PHP function from a HTML button click?

Can someone help me with some javascript that will allow me to call a function when I click on a button?
I know this has been posted before, but every answer I have seen is too vague and I have been at this for 8 hours now :(
Please bear in mind I am a javascript beginner.
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<?php include 'connect.php'; ?>
<table border cellpadding=5>
<div>
<tr>
<th>Report</th>
<th></th>
</tr>
<tr>
<td>Students with highest scores</td>
<td>
<button type= button>Generate report</button>
</td>
</div>
</table>
<?php
function highestScore()
{
$data = mysql_query("SELECT t.Test_name, s.Student_firstname, s.Student_surname, sc.Result
FROM Tests t
JOIN Scores sc ON t.id_Tests = sc.Tests_id_Tests
JOIN Students s ON sc.Students_id_Students = s.id_Students
WHERE t.id_Tests = 1
ORDER BY sc.Result DESC");
if(!$data)
{
die("Invalid Query: " . mysql_error());
}
Print"<table border cellpadding=5>";
while($info = mysql_fetch_array($data))
{
Print"<tr>";
Print "<th>Test:</th> <td>" . $info['Test_name'] . "</td> ";
Print "<th>First Name:</th> <td>" . $info['Student_firstname'] . "</td> ";
Print "<th>Surname:</th> <td>" . $info['Student_surname'] . "</td> ";
Print "<th>Result:</th> <td>" . $info['Result'] . "</td> ";
}
Print "</table>";
}
?>
</body>
I want to use the "Generate report" button I have made, to execute the "highestScore" function.
The function creates a table of values from a mySQL database.
There will eventually be more buttons which bring up different tables.
Any help is appreciated.

HTML and Javascript run on the browser while PHP runs on the server. You will have to make another server call either by using AJAX or refreshing the page. Here's how to do it with AJAX without refreshing the page. ($.ajax docs)
Create a new PHP page: query.php with the following code:
<?php
$data = mysql_query("SELECT t.Test_name, s.Student_firstname, s.Student_surname, sc.Result
FROM Tests t
JOIN Scores sc ON t.id_Tests = sc.Tests_id_Tests
JOIN Students s ON sc.Students_id_Students = s.id_Students
WHERE t.id_Tests = 1
ORDER BY sc.Result DESC");
if(!$data)
{
die("Invalid Query: " . mysql_error());
}
Print"<table border cellpadding=5>";
while($info = mysql_fetch_array($data))
{
Print"<tr>";
Print "<th>Test:</th> <td>" . $info['Test_name'] . "</td> ";
Print "<th>First Name:</th> <td>" . $info['Student_firstname'] . "</td> ";
Print "<th>Surname:</th> <td>" . $info['Student_surname'] . "</td> ";
Print "<th>Result:</th> <td>" . $info['Result'] . "</td> ";
}
Print "</table>";
?>
Use the button's click event to run an ajax request: (Add the following script to your HTML page)
$(function(){
$('button').click(function(){
$.ajax({
url:'query.php',
success:function(response){ alert(response); }
}); // this will alert the code generated in example.php
});
});

Instead of using button, use a form with a submit button. Send a request by POST, and detect that in PHP using isset($_POST['report']) and then display your report.
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<?php include 'connect.php'; ?>
<table border cellpadding=5>
<div>
<tr>
<th>Report</th>
<th></th>
</tr>
<tr>
<td>Students with highest scores</td>
<td>
<form method="POST">
<input type="submit" name="report">Generate report</button>
</form>
</td>
</div>
</table>
<?php
function highestScore()
{
$data = mysql_query("SELECT t.Test_name, s.Student_firstname, s.Student_surname, sc.Result
FROM Tests t
JOIN Scores sc ON t.id_Tests = sc.Tests_id_Tests
JOIN Students s ON sc.Students_id_Students = s.id_Students
WHERE t.id_Tests = 1
ORDER BY sc.Result DESC");
if(!$data)
{
die("Invalid Query: " . mysql_error());
}
Print"<table border cellpadding=5>";
while($info = mysql_fetch_array($data))
{
Print"<tr>";
Print "<th>Test:</th> <td>" . $info['Test_name'] . "</td> ";
Print "<th>First Name:</th> <td>" . $info['Student_firstname'] . "</td> ";
Print "<th>Surname:</th> <td>" . $info['Student_surname'] . "</td> ";
Print "<th>Result:</th> <td>" . $info['Result'] . "</td> ";
}
Print "</table>";
}
if (isset($_POST['report'])) {
highestScore();
}
?>
</body>

A raw button doesn't make sense in pure HTML. It does just nothing - except looking like a button.
You may use it in conjunction with JavaScript:
<form action="input_button.htm">
<textarea cols="20" rows="4" name="field1"></textarea>
<input type="button" name="Text 1" value="Add some new Text"
onclick="this.form. field1.value='Some new Text'">
</form>
This button executes a JavaScript through a click on it - and replaces the textarea named field1.

So you want this all on one page so the first thing you need is form html tag wrapped around the button, I have named mine 'submit' and set the action to the page itself <?php echo $_SERVER['PHP_SELF']; ?>. When the button is clicked it will preform your php code
Script
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<?php include 'connect.php'; ?>
<table border cellpadding=5>
<div>
<tr>
<th>Report</th>
<th></th>
</tr>
<tr>
<td>Students with highest scores</td>
<td>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"> <!-- Calls for the PHP script on the page-->
<button type= button>Generate report</button>
</form>
</td>
</div>
</table>
<?php
//Script that is called
if(isset($_POST['submit'])){ //The ID of the form we used is 'submit' so when that is clicked it will execute this
function highestScore()
{
$data = mysql_query("SELECT t.Test_name, s.Student_firstname, s.Student_surname, sc.Result
FROM Tests t
JOIN Scores sc ON t.id_Tests = sc.Tests_id_Tests
JOIN Students s ON sc.Students_id_Students = s.id_Students
WHERE t.id_Tests = 1
ORDER BY sc.Result DESC");
if(!$data)
{
die("Invalid Query: " . mysql_error());
}
Print"<table border cellpadding=5>";
while($info = mysql_fetch_array($data))
{
Print"<tr>";
Print "<th>Test:</th> <td>" . $info['Test_name'] . "</td> ";
Print "<th>First Name:</th> <td>" . $info['Student_firstname'] . "</td> ";
Print "<th>Surname:</th> <td>" . $info['Student_surname'] . "</td> ";
Print "<th>Result:</th> <td>" . $info['Result'] . "</td> ";
}
Print "</table>";
}
highestScore(); //executes your function you created
}
?>
</body>

HTML and JavaScript run on the browser while PHP runs on the server. You have to write Ajax or java-script.In java-script you can call the php page and do your stuff in that page.And it would be the better approach.You can pass the variable also.I post a example here.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function removeItem(oButton)
{
var hello = "hello";
var world = "world";
window.location.href = "trytest.php?w1=" + hello + "&w2=" + world;//Your page location
}
</script>
</head>
<body>
<form>
<h2>This is the test </h2>
<button type="show" onclick="removeItem(this); return false;">Test</button>
</body>
</html>

select p text jquery

I'm retrieving data from mysql like this structure =>
echo "<table id='postI" . $chat_row['id'] . "'>";
echo "<tr>";
echo "<td><p class='post_author'>" . $chat_row['user_name'] . "</p><a href='javascript: void(0)' class='edit_post_a'><div class='edit_post'></div></a></td>";
echo "</tr>";
echo "<tr>";
echo "<td><p class='posted_on'>" . $chat_row['posted_on'] . "</p></td>";
echo "</tr>";
echo "<tr>";
echo "<td><br></td>";
echo "</tr>";
echo "<tr>";
echo "<td><p class='posted_msg'>" . $chat_row['message'] . "</p></td>";
echo "</tr>";
echo "</table>";
and I can get the table id with this expression =>
$(".edit_post_a").bind("click",function(){
var tb_id = $(this).closest("table").attr("id"); // works , gets the id of the table
alert($(tb_id + ".posted_msg").text()); // don't work, gets nothing , just alert box
});
My problem is that want to know text of the third p, what I've tried =>
alert($("#" +tb_id + ".posted_msg").text());
alert($("#" +tb_id).find("p").last().text());
alert($("#" +tb_id + " p:nth-child(3)").text());
nothing works , get empty alert box , I've no idea whats wrong ? how can I fix it ? thanks
HTML code =>
<table id='postI245'>
<tr>
<td><p class='post_author'>USER</p><a href='javascript: void(0)' class='edit_post_a'><div class='edit_post'></div></a>
</td>
</tr>
<tr>
<td><p class='posted_on'>DATE</p></td>
</tr>
<tr>
<td><br></td>
</tr>
<tr>
<td><p class='posted_msg'>MSG</p></td>
</tr>
</table>
and so on ...

Your selector selects nothing, you should add # for selecting an element by id.
var txt = $('#'+tb_id + " .posted_msg").text();
or:
var txt = $(this).closest("table").find("p:eq(2)").text()