How to use Javascript in a innerHTML inline css scenario? - javascript

I am new to html5 and php. I am wondering how to use javascript in the case of my written code.
I am outputting my database data in a table in HTML. I want the last to output a bit more to the right. But if I use inline css styling I am getting a parse error:
my code:
<table class="scroll">
<thead style="background-color: #99E1D9; color: #705D56;">
<tr>
<th>ID</th>
<th>Name</th>
<th>Last Update</th>
<th style="padding-left: 30%;">Status</th>
</tr>
</thead>
<tbody id="hoverTable">
<?php
$connection = mysql_connect('localhost', 'root', '');
mysql_select_db('patientdb');
$query = "SELECT id, name, date, status FROM clients";
$result = mysql_query($query);
while($row = mysql_fetch_array($result)){ //looping through results
echo "<tr>
<td>" . $row['id'] . "</td>
<td>" . $row['name'] . "</td>
<td>" . $row['date'] . "</td>
<td class=\"fa fa-circle\" style=\"color: grey; margin-left: \30%;\"></td> //my question is regarding this line!!!!
</tr>"; //$row['index'] the index here is a field name
}
mysql_close();
?>
</tbody>
</table>
My goal is to change the color of the output of the last <td> depending on wether the data my database according to this logic:
if (x > 60) {
echo: "orange output";
}elseif (x >50) {
echo: "red output";
}else{
echo: "green output";
}
****How can I use JS in my current case?****
EDIT: trying out solutions
<script>
$('#hoverTable td').css('background-color',function(){
var x = DATA FROM MY DATABASE;
if (x > 50) {
echo: "orange output";
}elseif (x >60) {
echo: "red output";
}else{
echo: "green output";
}
});
</script>
Table code
<table class="scroll">
<thead style="background-color: #99E1D9; color: #705D56;">
<tr>
<th>ID</th>
<th>Naam Client</th>
<th>Laatste Update</th>
<th style="padding-left: 30%;">Status</th>
</tr>
</thead>
<tbody id="hoverTable">
<?php
$connection = mysql_connect('localhost', 'root', ''); //The Blank string is the password
mysql_select_db('patientdb');
$query = "SELECT id, naam, datum, status FROM clients"; //You don't need a ; like you do in SQL
$result = mysql_query($query);
while($row = mysql_fetch_array($result)){
$statusClass = 'class="green output"';
if($row['status'] > 60){
$statusClass = 'class="red output"';
}else if($row['status'] > 50){
$statusClass = 'class="orange output"';
}
echo
'<tr>
<td>' . $row["id"] . '</td>
<td>' . $row["name"] . '</td>
<td>' . $row["date"] . '</td>
<td class="fa fa-circle" style="color: grey; margin-left: 30%;" .$statusClass."></td>
</tr>';
}
mysql_close(); //Make sure to close out the database connection
?>
</tbody>
</table>

hello if you want to use in php and status is last "td" code can be like this:
while($row = mysql_fetch_array($result)){
$statusClass = 'green output';
if($row['status'] > 60){
$statusClass = 'red output';
}else if($row['status'] > 50){
$statusClass = 'orange output';
}
echo '<tr>
<td>' . $row["id"] . '</td>
<td>' . $row["name"] . '</td>
<td>' . $row["date"] . '</td>
<td class="fa fa-circle '.$statusClass.'" style="color: grey; margin-left: 30%;"></td>
</tr>'
}
make sure, that u have highest number in condition on first place, because if you use this code
if (x > 50) {
echo: "orange output";
}elseif (x >60) {
echo: "red output";
}else{
echo: "green output";
}
and x is 65 it returns "orange output" instead of "red output" because first statement is true, x is greater than 50
and using jquery for this is simplest solution. comment above, only apply id for table instead of selector "table"
$("#hoverTable td")...

Straightforward , if you are using jQuery.
$('#hoverTable td:last-child').css('background-color',function(){
var x = /*your target argument*/;
if(x > 50){return 'orange '};
});

You can't break lines in PHP. Use this:
echo "<tr>".
"<td>" . $row['id'] . "</td> ".
"<td>" . $row['name'] . "</td> ".
"<td>" . $row['date'] . "</td>".
"<td class=\"fa fa-circle\" style=\"color: grey; margin-left: \30%;\"></td> ".
"</tr>";
You need to concatenate the ends of each line, or use a heredoc.

Related

Live Search in PHP using AJAX working, but buttons not in td

my live search in working perfectly, but my tags are not in td. I can't figure out what is the problem. The picture, and the code are below. Thank you in advance.
The problem is down there in td, the the tags.
how it looks like
enter code here
<?php
#include('./config/constants.php');
$output = '';
if (isset($_POST['query'])) {
$search = $_POST['query'];
$stmt = $conn->prepare("SELECT * FROM clients WHERE full_name LIKE CONCAT('%',?,'%') OR email LIKE CONCAT('%',?,'%')");
$stmt->bind_param("ss", $search, $search);
} else {
$stmt = $conn->prepare("SELECT * FROM clients");
}
$stmt->execute();
$result = $stmt->get_result();
if ($result->num_rows > 0) {
$output = "<tr>
<th>ID</th>
<th>Full Name</th>
<th>E-mail</th>
<th>Phone</th>
<th>City</th>
<th>Address</th>
<th>Actions</th>
</tr>
";
while ($row = $result->fetch_assoc()) {
$output .= "<tr>
<td>" . $row['id'] . "</td>
<td>" . $row['full_name'] . "</td>
<td>" . $row['email'] . "</td>
<td>" . $row['phone'] . "</td>
<td>" . $row['city'] . "</td>
<td>" . $row['address'] . "</td>
<td>"
?>
Update Client
Delete Client
<?php
"</td>
</tr>";
}
echo $output;
} else {
echo "<h3>No Records found!</h3>";
}
You're outputting the links before the table rows.
You output them directly and then later output the rows in the variable $output.
Remove the ?> and <?php tags in your while loop and have the buttons be part of the $output string
while ($row = $result->fetch_assoc()) {
$output .= "<tr>
<td>" . $row['id'] . "</td>
<td>" . $row['full_name'] . "</td>
<td>" . $row['email'] . "</td>
<td>" . $row['phone'] . "</td>
<td>" . $row['city'] . "</td>
<td>" . $row['address'] . "</td>
<td>" . 'Update Client'.
'Delete Client'.
."</td>
</tr>";
}

PHP table pass to a var in javascript

I have this PHP code and I am trying to alert a table that receives its values via sql.
Here's my code:
<script src="jquery.min.js">
</script>
<script>
function bus(x){
alert("Row index is: " + x.value);
}
</script>
$sql="SELECT ID, NOME, CPF FROM cadastro WHERE NOME LIKE '%" . $name . "%'";
$result=mysqli_query($conn,$sql);
while($row=mysqli_fetch_array($result)){
$ID =$row['ID'];
$NOME=$row['NOME'];
$CPF=$row['CPF'];
echo '<table style="width:100%">';
echo "<tr>";
echo "<th> ID </th>";
echo "<th> NOME </th>";
echo "<th> CPF </th>";
echo "</tr>";
echo '<tr style="cursor: pointer;">';
echo "<td onclick='bus(" . $ID . ")' class='tab'>" . $ID . "</td>";
echo "<td onclick='bus(" . $ID . ")' class='tab'>" . $NOME . "</td>";
echo "<td onclick='bus(" . $ID . )' class='tab'>" . $CPF . "</td>";
echo "</tr>";
echo "</table>";
I need to get the value from the table and serve it to a javascript function.
If x is a Number, then x.value will give you undefined and you should just use:
alert("Row index is: " + x);
To get the value of the column, you could pass this to the function instead of the id and then get the innerHTML:
<td onclick="bus(this)" class="tab">column 1</td>
function bus(elm){
alert(elm.innerHTML);
}
function bus(elm) {
alert(elm.innerHTML);
}
<table>
<tr>
<td onclick="bus(this)" class="tab">column 1</td>
<td onclick="bus(this)" class="tab">column 2</td>
<td onclick="bus(this)" class="tab">column 3</td>
</tr>
</table>
You only have one error. onclick is passing the ID, so the following code will do exactly what you need:
<script>
function bus(x){
alert("Row index is: " + x);
}
</script>
I removed the .value from your javascript.
function bus(x){
alert("Value is " + x);
}
<table>
<tr>
<td onclick="bus(44)">44</td>
<td onclick="bus(44)">Lorem</td>
<td onclick="bus(44)">ipsum</td>
</tr>
</table>
In this case x is not an object, just a plain value so:
alert("Row index is: " + x);
gl, pb

I want to change color of text in a table loop based on text value

I have a looped table displaying the results of a drop-down form post (lotstatus). I want to be able to change the color of the text based on the value they selected in the form.
if($result = mysqli_query($conn, $sql)){ if(mysqli_num_rows($res) > 0){ echo "
<table class='table table-bordered table-striped' width='100%' data-pagination='true' data-search='true'>"; echo "
<thead>"; echo "
<tr>"; echo "
<th>Status</th>"; echo "
<th>Street #</th>"; echo "
<th>Street Name</th>"; echo "
<th>City</th>"; echo "
<th>Parcel ID</th>"; echo "
<th>Lot # (Unit)</th>"; echo "
<th>Contract Signed Date</th>"; echo "
<th>Closing Date</th>"; echo "
<th>Action</th>"; echo "</tr>"; echo "</thead>"; echo "
<tbody>"; while($row = mysqli_fetch_array($res)){ echo "
<tr>"; echo "
<td>" . "
<div class='statuscolor'>". $row['lotstatus'] . "</div>". "</td>"; echo "
<td>" . $row['streetnumber'] . "</td>"; echo "
<td>" . $row['streetname'] . "</td>"; echo "
<td>" . $row['city'] . "</td>"; echo "
<td>" . $row['parcelid'] . "</td>"; echo "
<td>" . $row['lotnumber'] . "</td>"; echo "
<td>" . $row['contractsigneddate'] . "</td>"; echo "
<td>" . $row['closingdate'] . "</td>"; echo "
<td>"; echo "<a class='btn btn-info mr-2 mt-2' href='readLot.php?id=". $row[' id '] ."' title='View' data-toggle='tooltip'><span style='margin-left: 7px;' class='la la-file-o ks-icon'></span></a>"; echo "<a class='btn btn-warning mr-2 mt-2' href='updateLot.php?id=". $row['
id '] ."' title='Edit ' data-toggle='tooltip'><span style='margin-left: 7px;' class='la la-pencil ks-icon'></span></a>"; echo "
<a class='btn btn-danger mt-2' href='deleteLot.php?id=". $row[' id '] ."' title='Delete ' data-toggle='tooltip'><span style='margin-left: 7px;' class='la la-close ks-icon'></span></a>"; echo "</td>"; echo "</tr>"; } echo "</tbody>"; echo "</table>";
// Free result set mysqli_free_result($result); } else{ echo "
<p class='lead'><em>No Lots were found.</em></p>"; } }
Here in the form I'm using: The user selects lot status - I want to change the color of the status based on what they chose.
<select class="form-control" value="<?php echo $lotstatus; ?>" id="lotstatus" name="lotstatus">
<option value="NA">N/A</option>
<option value="Executed">Executed</option>
<option value="Not Interested">Not Interested</option>
<option value="Hold">Hold</option>
<option value="Title Ordered">Title Ordered</option>
<option value="Vetting">Vetting</option>
<option value="Survey Ordered">Survey Ordered</option>
<option value="Lean Search Ordered">Lean Search Ordered</option>
<option value="Clear to Close">Clear to Close</option>
<option value="Closed">Closed</option>
</select>
I've tried styling the option value and also tried selecting the text() value of the field. Nothing is working... HELP!
First you need to add each row the status:
<tr class=\"Executed\">"; echo "
<tr class=\"Hold\">"; echo "
With JS you can add to the parent <table> the selected status:
$('select#lotstatus').on('change', function() {
$('table').attr('status', $(this).val());
});
Then, in your css you need to set the color that you want for each status:
table[status="Executed"] tr.Executed .statuscolor { color: red; }
table[status="Hold"] tr.Hold .statuscolor { color: green; }
table[status="Closed"] tr.Closed .statuscolor { color: yellow; }
Maybe you need to add an "id" to the table to avoid interferences with other tables.

How to show all records using PHP function and Javascript

I am new to mvc and I want to populate my table from database and I am having trouble with showing the data with the use of javascript to show it on my index. I am using a php function to query the sql script and i am using PDO.
index.php
<tr>
<th>last_name</th>
<th>first_name</th>
<th>middle_name</th>
<th>gender</th>
<th>age</th>
<th>course</th>
</tr>
<tr>
<div id=content> </div
</tr>
profile.php
public function showProfileRecord(){
require_once 'app/lib/config/config.php';
$result = $conn->prepare("SELECT a.`first_name`, a.`middle_name`, a.`last_name`,a.`gender`,a.`age`, a.`course` FROM account a ORDER BY name ASC");
while ($rows = $result->fetch()) {
$records = $records . "<td>" . $rows["last_name"] . "</td> <td>" . $rows["first_name"] . "</td> <td>" . $rows["middle_name"] . "</td> <td>" . $rows["gender"] . "</td> <td>". $rows["age"] . "</td> <td>" . $rows["course"] . "</td>";
}
$returnData[]["records"] = $records;
echo json_encode($returnData);
}
functions.js
showProfileRecord = function(data){
data = JSON.parse(data);
$("#content").append("\
<tr>" + data[0].records + "</tr>\
");
}

How to disable a href

How to disable a href link if there's value in PR row from database? Like my sample table below, if there PR disable the link.
Table
item_name | PR | < Add > |
ballpen | pr100 | <a> |
pencil | | <a> |
Paper | | <a> |
Clip | | <a> |
Codes,
<?php
echo '<table>
<thead>
<tr>
<th></th>
<th>Item Name</th>
<th>PR</th>
<th><Add></th>
</tr>
</thead>';
echo '<tbody>';
$i = 1;
while ($row = $result1->fetch_assoc()) {
if ($row['app_cn'] != '') {
echo '<tr>
<td>' . $i++ . '</td>
<td>' . $row['item_name'] . '</td>
<td>' . $row['pr'] . '</td>
<td align="center"><a class="fancybox" href="addpr.php?counts=' . $row["id"] . '"></a></td>
</tr>';
}
?>
I want to disable ballpen row <a class="fancybox" href="addpr.php?counts=' . $row["id"] . '"></a> if there's PR in row
while ($row = $result1->fetch_assoc()) {
if ($row['app_cn'] != '') {
echo '<tr>
<td>' . $i++ . '</td>
<td>' . $row['item_name'] . '</td>
<td>' . $row['pr'] . '</td>
<td align="center">';
if (!empty($row['pr'])){
echo '<a class="fancybox" href="addpr.php?counts=' . $row["id"] . '"></a>';
}
echo'</td></tr>';
}
You can use the following:
...
echo '<td align="center"><a class="fancybox" href="'.(($row['pr']!="")?'addpr.php?counts='.$row["id"]:'#'). '"></a></td>';
if you are trying to remove the modal (fancybox) functionality then you can do so by removing the class of the link with jquery or javascript..
example
$('a[href="PR100"]').removeClass('fancybox');
this checks each link on the page. if the link has an href attribute that is equal to PR100, we remove the fancybox class which would prevent the popup.
your question is pretty cryptic though. I'm guessing this is what youre asking..
<?php
echo '<table>
<thead>
<tr>
<th></th>
<th>Item Name</th>
<th>PR</th>
<th><Add></th>
</tr>
</thead>';
echo '<tbody>';
$i = 1;
while ($row = $result1->fetch_assoc()) {
if ($row['app_cn'] != '') {
$url = $row['pr'] ? 'addpr.php?counts=' . $row['pr'] : '#';
echo '<tr>
<td>' . $i++ . '</td>
<td>' . $row['item_name'] . '</td>
<td>' . $row['pr'] . '</td>
<td align="center"><a class="fancybox" href="{$url}"></a></td>
</tr>';
}
?>
Set the href attribute to "javascript:;"

Categories