We Keep Coding

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.

Apply selector to elements that have already been selected

I feel like I am asking something really dumb but perhaps it's not my day. If I have a selected element already, e.g:
let tables = $('table');
But now I want to apply another selector like .some-class on top of those tables, but without creating a new jQuery object like this
$('table.some-class')
How would I do it?

You need to use .filter() to adding filter to variable selector.
let tables = $('table');
tables = tables.filter('.some-class');
tables.css('color', 'red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>table</td>
</tr>
</table>
<table class="some-class">
<tr>
<td>table has .some-class</td>
</tr>
</table>

With the following code you would find all elements with class .some-class under the elements with tag name table.
let tables = $('table').find('.some-class');
Of course, it is just for the example, otherwise you can simply do:
let tables = $('table .some-class');
In your question it is not clear if you want children elements or just filter the elements. If you want the tables with a given class, you would do:
let tables = $('table').filter('.some-class');

Remove particular class from all table rows

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.

How to get inner tr tag using JQuery?

I am trying to grab documentnumber attribute from the tr tags inside tbody, and save it in an array.
Below is the html , I am working on
<tbody class="line-item-grid-body">
<tr data-group-sequence-number-field-index="" data-sequence-number-field-index="1" documentnumber="80" documentid="4133604" parent="80" class="line-item parent-line-item line-item-show reorderable-row droppable-element">
<td>
<table>
<tbody>
<tr></tr>
</tbody>
</table>
</td>
</tr>
<tr data-group-sequence-number-field-index="" data-sequence-number-field-index="1" documentnumber="80" documentid="4133604" parent="80" class="line-item parent-line-item line-item-show reorderable-row droppable-element">
</tr>
</tbody>
and this is what I did, which is not working. If I don't specify particular class then system also grabs inner tr tags, which I don't want
var docs = jQuery("#line-item-grid").find('tbody').find("tr[class='line-item parent-line-item line-item-show reorderable-row droppable-element']");
for (i=1;i<=docs.length;i++)
{
var tempValue = jQuery(docs[i]).attr('documentnumber');
alert(tempValue);
}
Any ideas?

There's several ways you could go about this. I would do the following....
var docs = $('.line-item-grid-body>tr');
Docpage: Child selector
Another option:
var docs = $('.line-item-grid-body').children('tr');
Bookmark and frequent this page ... Selectors - jQuery API

try this as your selector
$('tbody > tr','#line-item-grid');

Hmm i didn't test this (so check for typos), but off top of my head, i'd try something like this:
jQuery(".line-item-grid tbody > tr").each(function() {
alert($(this).attr('documentnumber');
});
You can define selectors one after another, pretty much same as in CSS.
Also check child selector (http://api.jquery.com/child-selector/) for selecting direct child elements.
Hope it helps

Javascript access TR from TD

I have a table row, and within that, I have a td (whatever it stands for). I would like to change the class attribute of the TR my TD is in without using an ID or a name. Like that:
<tr>
<td onclick="[TR].setAttribute('class', 'newName')">My TD</td>
</tr>
How do I do it?

td stands for table data..
now .. in your case you need the parentNode property of the td ..
<tr>
<td onclick="this.parentNode.setAttribute('class', 'newName')">My TD</td>
</tr>
or as bobince suggested in his comment
<td onclick="this.parentNode.className= 'newName'">My TD</td>

In jquery, it would be really simple if you have the reference to your td:
$(this).closest('tr');
If you really don't want to take a dependency on jQuery, then you could just do a loop getting the parentNode and checking it's type as a more general purpose solution. In this case you could just get the parentNode since tr is always a direct parent of td. You can do something like this (note this was not tested):
var parent = myTd.parentNode;
while(true) {
if(parent == null) {
return;
}
if(parent.nodeName === "TR") {
return parent;
}
parent = parent.parentNode;
}

If you have the dom element in javascript, you can use .parentNode() which will give you the parent node, which should be the table row. Then you can set .className

If you can use jQuery it could be something like this
$("yourtdselector").closest("tr").attr("class","classname");
For your code
<tr>
<td onclick="changeClass(this,'classname')">My TD</td>
</tr>
function changeClass(elem, class)
{
elem.parentNode.className = class;
}

jQuery is probably the easiest way of doing this, you can use selectors such as:
$('table.mytable tr').addClass('red');
To add a class of 'red' to all tr's in table.mytable. That's just the tip of the iceberg - check it out it should do what you need.

Without any extra framework:
document.getElementById("theTableName").rows[1].cells[1].className = "someclassname";