set tr background for td values - javascript

<table id="tab" border=2>
<tr> <td>1</td><td>a</td><td>red</td> </tr>
<tr> <td>2</td><td>a</td><td>green</td> </tr>
<tr> <td>3</td><td>a</td><td>orange</td> </tr>
<tr> <td>4</td><td>a</td><td>green</td> </tr>
<tr> <td>5</td><td>a</td><td>yellow</td> </tr>
<tr> <td>6</td><td>a</td><td>blue</td> </tr>
</table>
i can't modify html. i can use only jquery and css. i would like make:
if td == red then all TR with this TD is red, if td == green then all TR is green.
how can i make this?
live example: http://jsfiddle.net/sjuKa/1/

$('#tab tr').each(function() {
$(this).css({'background': $(this).children('td:last').text() });
});
example: http://jsfiddle.net/simoncereska/sjuKa/3/

You can use .text() to get the text value of a cell, and .parent() to get the element's parent. Combining these, you can loop the td tags, check if they contain 'red', and if so, get their .parent() and set its background-color to red.
See http://jsfiddle.net/sjuKa/2/ for a working example :)

JS:
var tds = $('td');
tds.each(function() {
$(this).parent().addClass( $(this).html().trim() );
})
CSS
.red
{
background-color: red;
}
JSFiddle
Same for all the rest - meaning CSS classes named: orange, green etc.

$(document).ready(function(){
$('table tr').each(function(){
if($(this).children(':last').text() == 'red') {
$(this).children('td').css('background-color', 'red');
}
})
})
fiddle here http://jsfiddle.net/sjuKa/1/

Related

how to remove a TR which have a TD that contain specific text

I have the following markup which have SPAN >> Table >> TR >> TD:-
now i want to specify either using css or jquery to remove the TR which have a TD that contain the word "Question" inside <nobr> tag. so can anyone adivce how i can do so ? thanks
You can use filter to compare the exact text of the <nobr> element, then remove the closest <tr>
$("span table tr td nobr").filter(function() {
return $(this).text() === "Question";
}).closest("tr").remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>
<table>
<tr>
<td>
<h3>
<nobr>Question</nobr>
</h3>
</td>
</tr>
<tr>
<td>
Untouched
</td>
</tr>
</table>
</span>
Try to use :has() selector along with :contains() selecor to achieve what you want,
$("tr:has(td nobr:contains('Question'))").remove();
DEMO
You can do it with jQuery as shown below:
$(document).ready(function(){
$('td').each(function(){
if($(this).find('nobr').text() === 'Question') {
$(this).closest('tr').remove();
}
});
});
It would have been helpful if you could provide HTML. I would have created fiddle but You can try below solution
Iterate tr in table and find the tr having
$("table.ms-formtable > tbody > tr").each(function(){
var text = $(this).find("td:first").find("nobr").text();
if(text === 'Question') {
$(this).remove();
}
});
http://jsfiddle.net/9tw2kfek/

jQuery- How to select a element with class name from a list of elements

I am using jQuery.
I want to select a cell from a table.
So I tried the following codes.
// First line works fine for me. I can get a list of columns at the correct target row.
var targetColumns = $(elemClicked).closest("tr").find("td");
// I want to get the cell with the class named "draftstatus". This line has problem. I cannot get what I want.
var targetCell = columnsAtTargetRow.$(".draftstatus");
The targetColumns inspected from browser looks like the following:
The 5th td above is my target cell.
I also try to use find() function. It won't work either because find() will start from next children level.
columnsAtTargetRow.find(".draftstatus"); // this does not work.
What functions should I used to get that cell within that "list of td".
Thanks in advance.
You just need to figure out which selectors to use.
var targetColumns = $(elemClicked).closest("tr").find("td");
this goes up the DOM to the "tr" and selects the tds. If the elemClicked is inside a td you can select the tds with closest("td"), and then use siblings(".draftstatus");
If the elemClicked is a td, then you can just use siblings(".draftstatus");
Here is some example code to help demonstrate some selectors. Hope this helps some and not confused you more.
$(function(){
//reference all cells with myclass class using filter
$("#table1 tbody td").filter(".myclass").addClass("red");
// click events for all tds reference the .target class cell using siblings
$("#table1 tbody td").on("click",function(e){
$(this).siblings(".target").toggleClass("red");
});
//items inside a table cell click event
$("#table1 tbody td a").on("click",function(e){
//toggle bold class
$(this).closest("td").siblings(".target").toggleClass("bold");
//prevent event from bubbling up
e.stopPropagation();
});
})
.red {
background-color:red;
}
.bold { font-weight:bold; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1" id="table1">
<tbody>
<tr>
<td>foo</td>
<td>bar</td>
<td class="myclass target">value2</td>
<td>Two link</td>
</tr>
<tr>
<td>foo</td>
<td>bar</td>
<td class="myclass target">value2</td>
<td>Two link</td>
</tr>
</tbody>
</table>
This is incorrect:
columnsAtTargetRow.$(".myclass");
This should be:
columnsAtTargetRow.find(".myclass");

jQuery - change table cells position

how can I change via jquery the cells position from 1 2 to 2 1 ?
<table id='mytable'>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
$('#mytable tr td:eq(0)').appendTo('#mytable tr');
The JSFIDDLE.
If you want to change all the second td to first position in your table, then you can use:
$.each($('#mytable tr td:eq(1)'), function() {
$(this).insertBefore($(this).prev());
})
Actually, above code will not work if your table have more than one <tr> element, if that is the case then you need to use .find():
$('#mytable tr').find('td:eq(1)').each(function() {
$(this).insertBefore($(this).prev());
});
Fiddle Demo
References: .each() , .find() , .insertBefore() , .prev()
with append
http://jsfiddle.net/F7HmQ/1/
$(function(){
var td = $("td").first() ;
$("tr").first().append(td);
});

Get reference to an element which has exactly a certain value

I want to get a reference to an elment which has exactly a certain text value with jquery css selector.
Example:
<table >
<tbody>
<tr>
<td>
<i>MYVAL</i> <!-- I want the reference to this element-->
</td>
</tr>
</tbody>
</table>
But I cannot succeed in it just writing
$('table tbody tr td i[value="MYVAL"]').SomeFunction();
Which is the correct syntax?
NOTE thats not using pure CSS selector!
Using .filter():
http://jsfiddle.net/p6fKe/
$('table tbody tr td i').filter(function(){return $(this).text() == "MYVAL"}).SomeFunction();
Use this code
$('table tr td i:contains("MYVAL")').SomeFunction()
DEMO: http://jsfiddle.net/enve/6wjDj/
function selectTextElement(text) {
var elements = [];
$('table tbody tr td i').each(function() {
if (jQuery(this).text() == text) {
elements.push(jQuery(this));
}
});
return elements;
}

need to access current TR or TD

I have to change the table row color based on some business logic. I have limited access.
I have PHP code which decide TD content...from that TD I have to change the current TR background color.
jQuery can help, as it is having lot of traverser and accesser.
code I am writing is
<script type="text/javascript">$(this).closest("td").css("border", "1px solid red");</script>
But not able to access the current TD or TR
Instead of using this, give the element an id and get it using jQuery. In your code, this points to nothing. like:
<table><tr><td> <input id="myInput" type="text" /> </td></tr></table>
//If you want to access the td
$('#myInput').closest("td").css("border", "1px solid red");
//If you want to access the tr
$('#myInput').closest("tr").css("background", "red");
here you can use parents() funciton.
if your element is $('#el') then following will give you nearest td and tr
$('#el').parents('td').first();
$('#el').parents('tr').first();
then you can apply operation like below
$('#el').parents('td').first().css("border", "1px solid red");
$('#el').parents('tr').first().css("border", "1px solid red");
Assuming the worst case, where you have nested tables and you cannot change current TD attributes, than print an empty span within it this way:
<table>
<tr>
<td>Content 1
<table>
<tr>
<td>Content 2<span data-class="very_important" /></td>
</tr>
</table>
</td>
</tr>
</table>
Than add class to (first or last) parent TR like this:
$(function() {
$('span[data-class]').each(function(n) {
var highlightClass = $(this).attr('data-class');
$(this).parents('tr:first').addClass( highlightClass );
$(this).remove(); /* Optional */
});
});
Now your TR has class and you can style it (and its children) the way you like. Result code:
<table>
<tr>
<td>Content 1
<table>
<tr class="very_important">
<td>Content 2</td>
</tr>
</table>
</td>
</tr>
</table>
You need some way to target the TD content or the TD itself. If the content was unique you could search for a keyword or phrase. Either way, you need a selector - $(this) is just a reference to the jquery object once inside a handler.
EDIT
I thought about it a bit more and here's something you could try. Since you only have access to the content, could you add something to it like UPDATED? If so, then you could add that keyword and with jQuery we can add in the border, background and remove the keyword like this:
​<table cellpadding="5px" cellspacing="5px" border="1px">
<tr><td>*UPDATED*Apple</td><td>Pie</td></tr>
<tr><td>Orange</td><td>Crush</td></tr>
</table>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
-
var $updatedContent = $('td:contains("*UPDATED*")');
$updatedContent.closest('td').css('border', '1px solid red').closest('tr').css('background','green');
$updatedContent.text($updatedContent.text().replace('*UPDATED*', ''));
​

Categories

Resources