We Keep Coding

how to get font colour or text colour of td value using javascript or jquery

I'm getting values of td if it contains "searched string" using
var t1=$(this).find('tr:has(td:first-child:contains("Error"))');
alert($(this).find('tr:has(td:first-child:contains("Error"))').css === "red"));
if (t1.length) {
str =t1.text().trim();
str = /:(.+)/.exec(str)[1];
errorArray.push(str);
// alert(str);
}
It is working fine. Now I want to add one more condition. How will I check for font colour of that. If it is equal to red then to proceed.Kindly help. If that can't be done then help me in searching for "Error" now how will I check using criteria "Match whole word". Search only for that particular string if any td has. If any td contains "Errorrr" it shouldn't consider that.

Check it... think, this is what yo need
$('table tr td').on('click',function(){
alert($(this).css('background-color'));
})
table tr td{ border:solid 1px; padding:2px}
table tr td:nth-child(even){ background-color:#ff3}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>first</td>
<td>second</td>
<td>third</td>
<td>fourth</td>
</tr>
</table>

Here it is without JQuery, using getComputedStyle(). With this function you can get the actual style that is, after all the cascades and overwriting is done, rendered on the page:
const td = document.querySelector("table tr td"); // you can use JQuery here, if that makes you happy, or whichever way to select the element from the DOM.
const colour = getComputedStyle(td).backgroundColor;
console.log(colour);
This way you can get any actual, rendered CSS attribute from any element. The only caveat is to replace the kebab-case with camelCase (background-color -> backgroundColor).

How to check if two <tr> elements are equal when ignoring some inner <td> elments?

I am just wondering if is it possible in JavaScript or jQuery to check if two DOM elements are equal when ignoring inner elements.
For example, how to compare two <tr>'s and ignore particular <td>'s? Is it possible?
Here is a particular case: (ignore td with text1 and text2 values and compare only the date values. Important notice: td elements are without id attributes).
<tr id="row1" class="row">
<td>2010-09-01</td>
<td>text1</td>
</tr>
<tr id="row2" class="row">
<td>2010-09-01</td>
<td>text2</td>
</tr>
EDIT: snippet added

if ($('#row1 tr td:eq(0)').html() == $('#row2 tr td:eq(0)').html())
{
alert("same")
}

I would have thought that the only content within a tr should be td elements, so why not just compare the td's you're interested in and ignore the one you aren't?

Updated:
If you are sure of the td position in tr, you can compare:
if($("#row1 > td").eq(0).text() == $("#row2 > td").eq(1).text())
{
}

How to get Upper HTML Tag with Jquery

I trying to a class to my html page with jquery, here is my code.
<tbody>
<tr>
<td class="itmId">1</td>
<td class="entryNAmee">David</td>
</tr>
<tr>
<td class="itmId">2</td>
<td class="entryNamee">Alan</td>
</tr>
</tbody>
I am changing the td to input text with jquery on clicking in the every td except 1st column. that is working fine and when the above event perform the tr become like below.
<tr>
<td class="itmId">1</td>
<td class="entryNAmee nowText">
<input type="text" value="Alan">
</td>
</tr>
After making corrections an event working in blur. code is below.
js.
$(document).on('blur','table tr td input',function()
{
var fieldNewValue = $(this).val();
var fieldNewId = $(this).closest('td.itmId').addClass("kkkkkkkkk");
//console.log(fieldNewId);
alert(fieldNewId);
/*$.ajax({
typr:"post",
url:"updateEntry",
dataType:'json',
data:{newValue:fieldNewValue},
success:function(data)
{
console.log("updated succesfully");
}
});
*/
$(this).parents('td').text(fieldNewValue).removeClass('nowText');
$(this).remove();
});
I Want to add a class to the upper td of the the clicked td.
I tried the closest and parents jquery api's, But didnt work,
Anyone can please support me to how to catch the td ?
Also what are the different between closest and parents in jquery.
Thanks

Change:
var fieldNewId = $(this).closest('td.itmId').addClass("kkkkkkkkk");
to:
var fieldNewId = $(this).closest('tr').find('td.itmId').addClass("kkkkkkkkk");
You can read the docs to see the differences between .closest() and .parents(), however in your code you weren't traversing far enough up the DOM. $(this).closest('td.itmId') was looking for a td that didn't exist where you expected it to since it's a sibling of the parent cell that you were in.
You could also use (this).closest('td').prev() instead of (this).closest('tr').find('td.itmId')

There is also .prev in jQuery which returns the "upper" or better previous element in current context. It works just like this:
$(this).prev().addClass('kkkkkkkkk')

jQuery Multiple Selector with split

I have this row with two <td>'s with classes messageROW and titleROW following a checkbox with the ID of 'activecd'. I'm trying to change the bg color of both messageROW and titleROW (the whole row) when the checkbox is toggled but instead titleROW only changes colors.
Any suggestions?
$('[id^=activecd]').change(function(){
$('.messageROW,.titleROW'+$(this).prop('id').split('activecd')[1]).closest('td').toggleClass('colorcode', this);
});
HTML:
<tr>
<td class="messageROW"></td>
<td class="titleROW"></td>
<td><input id="activecd"></td>
</tr>

I'd suggest the following, albeit untested:
$('[id^=activecd]').change(function(){
$(this).closest('tr').toggleClass('colorcode', this.checked);
});
This listens for the change event on the specified element(s), finds the closest tr element and adds the colorcode class if the checkbox is checked, and removes the class if not.

Try jQuery $().add(selector), $().toggleClass("bgOn") with css
<style>
.bgOn {background:rgb(255,230,230)} // any css to toggle.
</style>
Not clear question, I think.
<button onclick="someFunction(this)">Toggle color</button>
function someFunction(this){
var $this=$(this);
$this.parent().find(".messageROW,.titleROW").toggleClass("bgOn");
// or
$this.parent().parent().find("tr>td:first-child, tr>td:nth-child(2)").toggleClass("bgOn");
}
might help you.

How do I delete a particular row of a table using jQuery?

I have a table like the following:
HTML:
<table id="data-filter">
<tr>
<td>1</td>
<td>Harry Potter</td>
<td><span class="delete"></span></td>
</tr>
<tr>
<td>2</td>
<td>Frodo Baggins</td>
<td><span class="delete"></span></td>
</tr>
</table>
If the user clicks "x" in any row, that particular row will be deleted. I am able to find which row is clicked, but I am unable to find exactly which rows "x" is clicked. My jQuery and CSS code are below:
jQuery:
$(document).on('click', '#data-filter tr', function() {
rn = this.rowIndex;
alert('You clicked row: '+rn); // do something to remove this row
});
CSS:
.delete:after { content:"x";}
I want to trigger the delete event, only when the user clicks a particular row's "x", not the whole row or just any part of the row. I think I may be just missing the correct selector for this, but I am not sure.

You can use this to refer to the element targeted by the handler so
$(document).on('click', '#data-filter tr .delete', function() {
$(this).closest('tr').remove()
});
Also from what I can see, you need to delete the row when you click the delete button so you need to add the handler to the delete element and then use .closest() to find the tr element where the delete button is present then call .remove() to delete that row

I was looking at your problem and I have a solution:
$(document).on('click', '#data-filter tr .delete', function() {
this.parentElement.parentElement.remove();
});
And you need to remove the hashtag on your table id (should be just "data-filter") thats how you call it from jQuery not how it's declared on HTML
What I'm doing with the function its set the listener in the span not on the row and calling the parent nodes until the TR
Hope that works for you.