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
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");
}
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 !!
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)
});
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>");
});
});
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>