change font css on negative numbers - javascript

I'm trying to change the font color to red when the number is below 0. green when above. I've managed to get the entire row to go red thanks to a stackoverflow answer but can't manage to give it to the font itself.
the <?php echo $coin_gain; ?> displays a number that can negative.
<tr>
<td><?php echo $coin_name; ?></td>
<td><?php echo $coin_price; ?></td>
<td class="status"><?php echo $coin_gain; ?>%</td>
</tr>
<script>
$(document).ready(function() {
$(".status").each(function(){
var value = parseInt ( $( this).html() );
if (value < 0){
$(this).parent().css('background-color', 'red');
}
});
});
</script>

<tr>
<td><?php echo $coin_name; ?></td>
<td><?php echo $coin_price; ?></td>
<td class="status"><?php echo $coin_gain; ?>%</td>
</tr>
<script>
$(document).ready(function() {
$(".status").each(function(){
var value = parseInt ( $( this).html() );
if (value < 0){
$(this).css('color', 'red');
}
});
});
</script>
You simply need to remove the parent selector to target the cell itself rather than the row.

If you output with PHP, then process class with PHP too:
For font color it's color: #000000 and not background-color
<?php $isPositive = $coin_gain >= 0; ?>
<tr style="background-color: <?= $isPositive ? 'green' : 'red'; ?>>
<td><?= $coin_name; ?></td>
<td><?= $coin_price; ?></td>
<td class="status" style="color: <?= $isPositive ? 'green' : 'red'; ?>><?= echo $coin_gain; ?>%</td>
</tr>

If you want to target the cell, remove .parent() :
if (value < 0){
$(this).css('color', 'red');
} else {
$(this).css('color', 'green');
}
When you add .parent() you target the containing element of your cell (<td>), which is the row (<tr>)

<tr>
<td><?php echo $coin_name; ?></td>
<td><?php echo $coin_price; ?></td>
<td class="status"><?php echo $coin_gain; ?>%</td>
</tr>
<script>
$(document).ready(function() {
$(".status").each(function(){
var value = parseInt ( $( this).html() );
if (value < 0){
// this will change the color of font
$(this).css('color', 'red');
}
});
});
</script>

Related

Change class with javascript for row when number of rows is unknown

I want to have a 'popup' div whenever I click on a row. I tried to do this with javascript to toggle a class.
We are filling a table with WordPress custom post types and the number of rows are therefor unknown.
The id "bedrijfsinfo-x" is being generated correctly, and function counts the right amount of rows. It still toggles the class on all divs instead of just the one associated with the row I clicked on.
Any help would be greatly appreciated!
<?php $counter = 1 ; ?>
<?php
// Als er berichten zijn gevonden.
if ( $posts->have_posts() ) {
// While loop om alle berichten op te halen
while ( $posts->have_posts() ) :
$posts->the_post();
global $post;
?>
<tr id="su-post-<?php the_ID(); ?>" class="su-post contracten">
<td class="meta_data" onclick="showInfo()"><?php bedrijfsnaam(); ?></td>
<td><?php naam_contactpersoon(); ?></td>
<td><?php url(); ?></td>
<td><?php start(); ?></td>
<td><?php eind(); ?></td>
<td><?php frequentie(); ?></td>
<td><?php datum_onderhoud(); ?></td>
</tr>
<div id="bedrijfsinfo-<?php echo $counter?>" class="infobox">
<p>Bedrijfsinformatie<br><?php bedrijfsnaam() . url() . start() . eind(); ?></p>
<button onclick="showInfo()"><p class="button">Sluiten</p></button>
</div>
<?php $counter = $counter + 1; ?>
<?php endwhile; }
<script>
function showInfo() {
var tr_count = document.getElementsByTagName("tr").length;
for (var i = 1; i < tr_count; i++) {
var popup = document.getElementById("bedrijfsinfo-"+ i);
popup.classList.toggle("show");
}
}
</script>
Your showInfo function iterates over the entire number of rows. Sounds like that's not what you want. Maybe try passing in the id of the thing clicked?
<td class="meta_data" onclick="showInfo(<?php $counter; ?>)"><?php bedrijfsnaam(); ?></td>
// ...
<button onclick="showInfo(<?php $counter; ?>)"><p class="button">Sluiten</p></button>
function showInfo(i) {
var popup = document.getElementById("bedrijfsinfo-"+ i);
popup.classList.toggle("show");
}

How to create array in document.getElementById

AS title, I want to create array in document.getElementById because my id is come from repeat region. Below is my javascript and html.
<script type ="text/javascript">
$(document).ready(function(){
$('table tbody tr').click(function(){
var PurchaserID = window.opener.document.getElementById("PurchaserID");
var n = 5;
PurchaserID.value = document.getElementById("test[n]").innerText;
alert(PurchaserID.value);
window.close();
});
});
</script>
<?php do { ?>
<tr>
<td id = "test[<?php echo $row_Purchaser['ID'];?>]" align="center" ><?php echo $row_Purchaser['ID'];?></td>
<td align="center"><?php echo $row_Purchaser['Name']; ?></td>
<td align="center"><?php echo $row_Purchaser['IC']; ?></td>
<td align="center"><?php echo $row_Purchaser['Handphone']; ?></td>
</tr>
<?php } while ($row_Purchaser = mysql_fetch_assoc($Purchaser)); ?>
Any problem of my program. Why I can't get the value test[n] to test[5] even I create var n =5; May I know how to solve it. Thanks if you could me !!

get single records using jquery

In Foreach loop of php i get on click event only 'product_title' and 'email'. code is as bellow.
foreach($abs_records as $abs)
{
<tr>
<td><input type="checkbox" name="case[]" class="case" ></td>
<td><?php echo $abs['product_id']; ?></td>
<td><?php echo $abs['product_title']; ?></td>
<td><?php echo $abs['user_email']; ?></td>
<td class="send_mail_btn"><a href="javascript:void(0)" >Send</a></td>
</tr><?php
} ?>
Using Jquery click on 'Send' i will get the result of Single Time value of 'Product_title' and 'user_email'
Can you suggest me.
Thanks.
Add a class to the td element like so:
<tr>
<td><input type="checkbox" name="case[]" class="case" ></td>
<td><?php echo $abs['product_id']; ?></td>
<td class="title"><?php echo $abs['product_title']; ?></td>
<td class="email"><?php echo $abs['user_email']; ?></td>
<td class="send_mail_btn"><a href="javascript:void(0)" >Send</a></td>
</tr>
Than you can find the related values in jQuery:
$(document).on('click', '.send_mail_btn', function() {
var title = $(this).siblings('.title').html();
var email = $(this).siblings('.email').html();
console.log("Title: " + title);
console.log("Email: " + email);
});
add class to email and title td and also add class to send anchor tag + add click event in jquery to get value
foreach($abs_records as $abs)
{
<tr>
<td><input type="checkbox" name="case[]" class="case" ></td>
<td><?php echo $abs['product_id']; ?></td>
<td class="title"><?php echo $abs['product_title']; ?></td>
<td class="email"><?php echo $abs['user_email']; ?></td>
<td class="send_mail_btn"><a class="send-link" href="javascript:void(0)" >Send</a></td>
</tr><?php
} ?>
Jquery:
$(".send-link").click(function() {
var title = $(this).parent("tr").find(".title").text();
var email = $(this).parent("tr").find(".email").text();
alert(title+ " -- "+email)
});

How to get values dynamically in js from php?

I want to get dynamic values from php in js in a dynamic manner...Let me elaborate: First I show the image then code:
<div id="">
<table border="1" width="820" style="margin-left:15px;">
<tr>
<th>Sr #</th>
<th>Commented Post</th>
<th>Commenter Name</th>
<th>Commenter Email</th>
<th>Comments</th>
<th>Status</th>
</tr>
<?php
$values = array();
while($row= mysqli_fetch_assoc($res)) {
$values[] = $row['comment_id'];
?>
<tr align="center" style="height:50px;">
<td><?php echo $row['comment_id']; ?></td>
<td><?php echo $row['post_title']; ?></td>
<td><?php echo $row['comment_name']; ?></td>
<td><?php echo $row['comment_email']; ?></td>
<td><?php echo $row['comment_text']; ?></td>
<td>
<?php
if($row['status']==0) { ?>
<div class="status_<?php echo $row['comment_id']; ?>" id="status_<?php echo $row['comment_id']; ?>">Unapproved</div>
<?php } else { ?>
Approved
<?php } ?>
</td>
</tr>
<?php }
?>
</table>
</div>
And Js here's:
<script type="text/javascript">
$(document).ready(function(){
var values = <?php echo json_encode($values); ?>;
var id = values[0];
$('.status_'+id).click(function(){
$("#status_"+id).html("<b>Test</b>");
});
var i = values[1];
$('.status_'+i).click(function(){
$("#status_"+i).html("<b>Test</b>");
});
});
</script>
I want to get all comment id's in js dynamically, so that on clicking each row link, it changes to text "Test"...As I have written the js code manually...how we obtain all the comment_id's dynamically in js..I hope you got the idea what I am trying to do...
There's no point in assigning unique ids to each of your elements. Why not do something like:
<tr>
<td>...</td>
<td><a href="#" onclick="toggle(this, <?php echo $id ?>)">Unapproved</td>
</tr>
then something like
function toggle(node, id) {
node.parentNode.innerHTML = '<b>test</b>';
... do something with "id" value? ...
}
No need for getElementById, assigning a massive pile of repetitive ids, etc.. just a single function call and a bit of DOM tree traversal.
Try to add a class to your status TD, like <td class="status" data-id="<?php echo $row['comment_id'] ?>">// your inital value</td>.
Using jQuery you can easily listen for events which are attached to a an event listener:
$(document).on('click', '.status', function() {
var id = $(this).attr('data-id');
$(this).html('<strong>Test</strong>');
// maybe to something with ajax?
$.ajax({
url: 'yourfile.php?call=doSomething&id=' + id,
type: 'post'
}).done(function(response) {
// console.log(response);
});
});
You dont appear to actually use the ids.
All you need to do is ascertain the clicked element, which use can do using this
html:
<div class="status">Unapproved</div>
js:
$(document).ready(function(){
$('.status').click(function(){
$(this).html("<b>Test</b>");
});
});

Hide row depending on a html table cell value

I have a table that displays data from database and i have a cell with a simple arithmetic function.
I want to hide the entire row where the result of the sum is zero(if $sold value is zero).
<input type="button" id="btnHide" Value=" Hide Empty Rows " />
...
<tbody>
<?php }
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
$sold=$row['value1']+$row['value2']);
{ ?>
<tr>
<td><?php echo $row['contract'] ?></td>
<td><?php echo (round($row['value1'], 2)) ?></td>
<td><?php echo (round($row['value2'],2 )) ?></td>
<td><?php echo ((round($sold, 2))+0) ?></td>
</tr><?php } } ?>
</tbody>
I found some code to hide all rows where it have empty cells, but it's not what i want. Thx for help.
$(document).ready(function() {
$("#gdRows td").each(function() {
var cellText = $(this).text();
if ($.trim(cellText) == '') {
$(this).css('background-color', 'cyan');
}
});
$('#btnHide').click(function() {
$("#gdRows tr td").each(function() {
var cell = $.trim($(this).text());
if (cell.length == 0) {
$(this).parent().hide();
}
});
});
$('#btnReset').click(function() {
$("#gdRows tr").each(function() {
$(this).show();
});
});
});
Add a class to those cells for simplification
<td class="sold"><?php echo ((round($sold, 2))+0) ?></td>
Then use filter()
$("td.sold").filter(function() {
return +$(this).text().trim() === 0;
}).parent().hide();
You could also do the same thing in php by adding a hidden class to the row if $sold is zero and add a css rule for hidden class
PHP
<tr class="<?= $sold == 0 ? 'hidden' :'';?>">
The following function will loop through all <tr> in a table and find the 4th cell within the row. If that cell contains a value that evaluates to zero, then the row becomes hidden.
$("table tr").each(function() {
var sold = $(this).find(":nth-child(4)");
if (parseFloat(sold.text()) === 0)
$(this).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td>Contract</td>
<td>123</td>
<td>456</td>
<td>789</td>
</tr>
<tr>
<td>Contract</td>
<td>123</td>
<td>456</td>
<td>0</td>
</tr>
<tr>
<td>Contract</td>
<td>0.123</td>
<td>0.456</td>
<td>0.0</td>
</tr>
<tr>
<td>Contract</td>
<td>0.123</td>
<td>0.456</td>
<td>0.789</td>
</tr>
</table>

Categories