Remove particular class from all table rows - javascript

in which on particular tr elements i have a class "deleted_row" which should be remove from all tr elements which have that class. I gave a id, I think which can help me to do this.
Is anyone know any method to do above thing.
Thanks.

If I understand well you want to remove the class "deleted_row" to all elements which have that class. To do so, you need to select those elements and remove the class:
function removeClass() {
const rows = Array.from(document.querySelectorAll('tr.deleted_row'));
rows.forEach(row => {
row.classList.remove('deleted_row');
});
}
.deleted_row {
background-color: red;
}
<table>
<tr class="deleted_row"><td>Row</td><td>1</td></tr>
<tr class="deleted_row"><td>Row</td><td>2</td></tr>
</table>
<button onclick="removeClass()">Remove class</button>

As i can see from your question, You only want to remove particular class from all tr elements. I am assuming that, "deleted_row" class only exists in your tr element & you are assuming tbody id as your parent element. Below is jquery code for that.
$('#tbody').children().removeClass('deleted_row');
Note: It will remove "deleted_row" from all tr elements which contains that class, Not particuar tr elements.
Thanks.

Related

Remove hidden attribute from tr tag

I am relatively new to coding and I am trying to remove the "hidden" attribute from a tr tag if I press a button. I tried this by using removeAttribute but nothing happens. I tried this with other tags like button to see if the problem is related with the actual tr tag but nothing worked.
This is the html:
<tr class="hidden1"> <!-- hidden -->
<td><img src="/Users/benrodgers/Desktop/Coding/Project/greenArrowUp.png" id="redDown"></td>
<td rowspan="2">
<textarea name="userimp" id="userImp" disabled></textarea>
<button type="button" id="editBTN" onclick="edit()">:</button>
</td>
</tr>
This the JS:
function addComment() {
var addCom = prompt("Add you comment if you have any tips");
if (addCom != null) {
document.myForm.userinp.value = addCom;
document.getElementsByClassName("hidden1").removeAttribute('hidden');
}
}
Method 1: You need to select the first element from the ClassName, since getElementsByClassName returns a collection (kind of array but not exactly) . Also, you need to remove the attribute name which is class not the value :)
Try this:
document.getElementsByClassName("hidden1")[0].removeAttribute("class");
Method 2: You can also remove this class using the below method:
document.querySelector(".hidden1").classList.remove("hidden1")
It seems like that there is no "hidden" attribute on the <tr> which you can remove.
I guess you wanted to remove the "hidden1" class from the <tr>.
In this case you can do the following:
function addComment()
{
var addCom = prompt("Add you comment if you have any tips");
if (addCom != null)
{
document.myForm.userinp.value = addCom;
document.getElementsByClassName("hidden1")[0].classList.remove("hidden1");
}
}
Notice that the document.getElementsByClassName returns with an Array (actually a collection, but it's like Array), so you have to refer to it's member to refer to an actual DOM element.
this should be work for you:
document.getElementsByClassName("hidden1")[0].classList.remove("hidden1");
because getElementsByClassName returns an collection. in this case index 0 be worked.
Note!
but if you have more tr tags in your table the you have to implement an uniqu selector. or dynamic class names.

Javascript jQuery . Add class when the same data-date

I have two tables
<table>
<tr>
<td class="myclass" data-date="2015-07-09"> Some text </td>
</tr>
</table>
<table>
<tr>
<td data-date="2015-07-09"> Text </td>
</tr>
</table>
What I want to do is:
Firstly take the class 'myclass' and add to it one new class 'newclass' . I can easily do it by $('.myclass').addClass('newclass');
Secondly I want to search the DOM if there is a < td > which has the same data-date with the .myclass < td > and add also to the newly found < td > the .newclass
Thank you in advance
You can use:
$('td[data-date='+$('.myclass').data('date')+']').addClass('newclass');
This will satisfy the both condition you are looking for. i.e. adding class to both the td elements.
$('.myclass').data('date') will get the date for myclass element. and attribute value selector to target all the td elments that have same data as that of myclass including myclass itself.
You could simply do:
$('.myclass').each(function () {
$('td[data-date="' + $(this).attr('data-date') + '"]').addClass('newclass');
}):
This will add the new class to each element with the same data-date, including the original one with myclass
Also, this would work fine even if you have multiple rows with a myclass - assuming your question was made more basic than your actual need.
Try this
$("td[data-date='2015-07-09']").addClass('myClass');
You can make it more simple if you give an id to your tables.
Like first-table-name and second-table-name.
In this case you will be able to do this with this code:
$("#first-table-name .myclass").each(function() {
$(this).addClass("newClass");
$("#second-table-name td[data-date='" + $(this).data('date') + "']").addClass("newClass");
});

Selecting just one the closest element

I have problem with selecting just ONE the closest element by using jQuery.
My HTML code
<table>
<tbody>
<tr>
<td>
<span class="control"><img class="doAction"></span>
</td>
</tr>
<tr>
<td class="details">sometext</td>
</tr>
</tbody>
</table>
I would like to get the text from the .details after clicking on the image .doAction
But the problem is that I have multiple times this same HTML code, so I want just the closest to this img .details text to get.
How can I do that?
You can also use .parents() with .next() and .find()
$('.doAction').on('click', function() {
console.log($(this).parents('tr').next().find('.details').text());
});
Demo
Over here, am selecting the parent tr of the img tag with a class of .doAction and then am moving on to the next tr and searching for an element with .details
Note that it's .parent(s), if you want you can also use .parent() but then you need to use it thrice, like
$(this).parent().parent().parent().next().find('.details').text();
/* --^-- --^-- --^-- --^--
Selects span td tr goes to next tr and then finds for .details
and returns text */
$('.doAction').click(function(i, e)
{
e.closest('table').find('.details').html();
});
NOTE: Another approach would be to traverse up to the tr only, get the next sibling, then get the .details from there. This may be more precise as you might have several of these .doAction and .details elements in there:
$('.doAction').click(function(i, e)
{
e.closest('tr').next().find('.details').html();
});
Reference:
http://api.jquery.com/closest/
Use .closest() to traverse to table and then find td with .details in it:
$('.doAction').click(function(){
$(this).closest('table').find('.details').text();
});

Add class to element that doesn't have class - jQuery

In the table below only one td has class, another doesn't have class like:
<table id="bow-me">
<tr class="row-me">
<td class="show-me">Pet is Great</td>
<td>Pete is Greate</td>
</tr>
</table>
I tried something like:
if(!$("#bow-me tr td").hasClass("show-me")) {
$(this).addClass("know-me");
}
But this doesn't add the class know-me in my second td here.
I have attached the JSFiddle here
If I want to add Class to the second td only then how do I do?
Try attribute selector and :not() to get the <td> without any class
$('#bow-me tr td:not([class])').addClass('know-me');
Or if you want to specify which <td> like first or second, use :eq()
$('#bow-me tr td:eq(1)').addClass('know-me');
Doc reference
:not()
Attribute selectors
.eq()
You can use :eq() selector:
$('#bow-me tr.row-me td:eq(1)').addClass('know-me');
Updated Fiddle
or .eq()
$('#bow-me tr.row-me td').eq(1).addClass('know-me');
Updated Fiddle
the reason your code doesn't work is because
There are multiple td's found with your selector
$("#bow-me tr td")
You can't use the $(this) as a selector inside your if conditional statement. it has no valid reference as is.
Solution: you can cycle through the matched elements via each() function and then set up your conditional to check each one of the elements found - $(this) would work in this case
$("#bow-me tr td").each(function() {
if(! $(this).hasClass("show-me")) {
$(this).addClass("know-me");
}
});
check out the jsFiddle here
I gave this answer as an explaination as to why your approach does not work.
I prefer Anton's approach that uses the :not() pseudo selector.

Change text of specific <a> text using jQuery

I have an asp:Repeater that makes a table with a few <td>s and <tr>s. In each of the <tr>s, I have an <a></a>.
Now, on a certain event I want to change just the <a></a> tag in the <tr>.
So, I want to do something like:
$("a").text("I changed!");
, but I only want to change the <a>.text in one <tr>, not all the <a> elements on the page.
I am experimenting with .closest(), but unfortunately don't know enough about jQuery to make this functional.
if you have the target tr somehow, then you can use the following code to find the a tag inside that:
tr.find("a").text("text here");
How to find tr really depends on what context you are in and how your target tr is identified from others.
e.g. if it's the "first" tr you may say:
var tr = $("tr").first();
if it's the element that the event has happened for (e.g. click event):
var tr = $(this);
if you are in the event of a child element of target tr you may say:
var tr = $(this).closest("tr");
You should mark the <tr> with an Id so that you could identify it and then change the containing
So for example you could mark your <tr> with id 'myid' and do something like this in jquery:
$("#myid a").text("I changed!");
Or if you dont want to mark it with an Id then, you could use selectors if you know which it is.
For example getting the first would be:
$("tr:first a").text("I changed!");
Some references:
http://api.jquery.com/first-selector/
http://api.jquery.com/category/selectors/

Categories