I am fetching data using PHP from MySQL Database. I have a field called outstanding dues, i want that if the outstanding dues are above 0, then the table should display this value with its cell border color as RED. Now, i trying to use a condition but it can't seem to work. I also tried doing this using JQuery Filter method, but still no luck, below is my code for JQuery
echo '<div class="middle"><td><center>'. $row['outstandingdues'] . '</center></td></div>';
The JQuery method i used for this is as under;
<script>
$( "div" )
.filter( ".middle" )
.css( "border-color", "red" );
</script>
div can't be a parent of td, td should be added to a tr so give the class to the td. tr is the only permitted parent of td
echo '<td class="middle"><center>'. $row['outstandingdues'] . '</center></td>';
then in style
td.middle {
border-color: red
}
or in script
$("td.middle").css("border-color", "red");
addition to Arun P Johny's answer:
<?php
$class_middle = "";
if($row['outstandingdues'] > 0) {
$class_middle = 'class="middle"';
} else {
$class_middle = "";
}
echo '<td '.$class_middle.'><center>'. $row['outstandingdues'] . '</center></td>';
?>
This will make it red only when outstanding dues are greater than 0.
Use this code (by the way do not use div inside your tr tag use it in td or assign .middle class to the td and remove div tag before that td
$(function() {
$( "div.middle" ).css( "background-color", "red");
});
Related
I am trying to remove the style of my a href background. The issue is when I concatenate dynamic id with selector then it don't work. But when I use complete name of selector, then it works.
I know you can mark my question as duplicate like here but they are not working for me. Please correct me.
What Works:
$("a").click(function(event)
{
var id = event.target.id;
$('#chatIdStyle4').removeAttr("style");
});
What Didn't:
$("a").click(function(event)
{
var id = event.target.id;
$('#chatIdStyle'+id).removeAttr("style");
});
OR
$("a").click(function(event) {
//alert(event.target.id);
var iddds = event.target.id;
$('#chatIdStyle["'+ iddds + '"]').removeAttr("style");
});
NOTE: var id contains the dynamic id of event fired.
EDIT as asked:
Below is my HTML+PHP code. So, what it does is actually creates 4 dynamic a href with dynamic id. What I
want is when a specific a href gets clicked then it should remove previous a href background and
add background to the clicked a href.
<?php
$color = false;
$PID = 4;
for($i=0;$i<4;$i++)
{
?>
<a <?php if($color==true)
{
?> style="background-color: #E6E6E6;" <?php
}
$color=false;
?>
id="chatIdStyle<?php echo $PID; ?>"
href="#">
</a>
<?php
}
?>
I suggest using CSS solution instead of jQuery:
a { background: none; }
a:active { background: #E6E6E6; }
The second line will set the background for the last clicked a element.
About the :active pseudo class: https://www.w3schools.com/cssref/sel_active.asp
I want to highlight row and column in a table but not all of them, just until end of selected one td. I'll put a link here to prove what i want, go down and where is size table (size chart) hover on it and you will see:
http://www.nike.com/ro/en_gb/c/size-fit-guide/mens-shoe-sizing-chart
How can I highlight with limit like that?
Here is my table: https://jsfiddle.net/pkkbf9k2/
I think that's it:
https://jsfiddle.net/8odoros/pkkbf9k2/4/
$( "td" ).hover(
function() {
var myCol = $(this).index();
var $tr = $(this).closest('tr');
var myRow = $tr.index()+1;
$('tr:nth-child('+myRow+') td:lt('+myCol+')').addClass( "hover" );
myCol++; myRow--;
$('table tbody td:nth-child('+myCol+')').each(function (index) {
if(index<myRow) $(this).addClass( "hover" );
});
$(this).addClass('hoverBold');
}, function() {
$( '*' ).removeClass( "hover" );
$(this).removeClass('hoverBold');
}
);
Here is a similar CSS tutorial. It will give you a more better idea.
https://css-tricks.com/simple-css-row-column-highlighting/
Hope this helps you.
Here sample link for highlighting row using jquery
http://www.mkyong.com/jquery/how-to-highlight-table-row-record-on-hover-with-jquery/
You can give the bgcolor to the tag which you wanted to highlight.
<td bgcolor="#FF0000">Content</td>
Or You can give class also to the tag which you want to highlight.
example
<td class="highlight">Content</td>
and give the background color to the style.css file.
I want to use the jQuery contains selector only for a table with a unique id.
I tried it like this but doesnt work.
var x = "tree";
$( "#TableID.tr:contains('" + x + "')").css( "background-color", "red" );
The code should change the backgroundcolor of every row which contains x in the tr tag in a table with the id TableID.
Can anyone help me with the correct syntax?
you should use descendant selector for the table and the tr element
$( "#TableID tr:contains('" + x + "')").css( "background-color", "red" );
Your code looks for a table with id TableID with class tr and contains the given text some where within it
You need to separte the .tr form the table id and remove the dot as it is not a class element.
$( "#TableID tr:contains('" + x + "')").css( "background-color", "red" );
Living demo
Try this,
$( "tr:contains('" + x + "')").css( "background-color", "red" );
Demo link http://jsfiddle.net/dhana36/YT3CD/2/
I have a two datatables and have this function to move rows from one to the other, it works perfectly as is, but I want to trigger the action not by clicking the row but by clicking a button, tried changing it but won't work.
...
stockTable.on('click', 'tr' ,function() { //'#toggle' selector instead 'tr'
var $row = $(this); // $(this).closest('tr'); instead $(this);
var addRow = stockTable.fnGetData(this); //$(this).closest('tr'); instead
catalogTable.fnAddData(addRow);
stockTable.fnDeleteRow($row.index());
});
...
<td><button class="toggle">C</button></td>
....
Sorry if the question may seem dumb but I'm ne to javascript.
Thanks in advance.
Replace tr with .toggle and it should work. You were trying with the ID # selector, you need a class . selector.
stockTable.on('click', '.toggle' ,function() {
You then have to re-assign this to the closest tr:
var $row = $(this).closest("tr");
I use the following jquery function for highlight the row ( using bg color ) in Html table.It was working fine.my question is how to select the second row from the table.'highlight' is a class
.highlight td {
background: #E7EFFA;
}
$('#Tabnameabcd tr').mouseover(function() {
if ($.trim($(this).text()) != '')
$(this).addClass('highlight');
}).mouseout(function() {
$(this).removeClass('highlight');
});
which means:
name age depart
test 12 test
test1 13 tested
here name,age,depart as a first row.that is title.
next test,test1 are elements of the tabe.if i use that jquery function the title( name,age,depart ) are apply.i need to apply that jquery function only to the elements of the table not a title?how to do this?
To get second row: $('#Tabnameabcd tr').eq(1) or $('#Tabnameabcd tr:eq(1)').
To get all rows from second one (Demo: http://jsfiddle.net/pXj5F/):
$('#Tabnameabcd :nth-child(n+2)')
Also you should think about thead and tbody...
Try like this
$('#mytable_id tr').eq(1).(your function here);
and you want to apply for the rows not the tiltes then you can also use
$("#mytable_id td").function({
//Play here
});
it will applicable to all the td's of your table excluding titles.you can also use ".not()" function instaed of this