We Keep Coding

How to modify a HTML <td> (without any unique properties) element using Javascript

I'm trying to modify a element using JS however this element does not have any unique properties like ID. Also the table in which this element resides does not have a unique class. Also, the HTML page has multiple tables and td elements.
For example:
Existing HTML :
<table border="1">
<tbody>
<tr>
<td>Id</td>
<td>Name</td>
</tr>
<tr>
<td>12334567</td>
<td>BirthName</td>
</tr>
</tbody>
</table>
I'm trying to modify the cell which contains the value "BirthName" to "BirthName (Sidharth)"
Something Like this:
<table border="1">
<tbody>
<tr>
<td>Id</td>
<td>Name</td>
</tr>
<tr>
<td>12334567</td>
<td>BirthName (Sidharth)</td>
</tr>
</tbody>
</table>

You can find all having BirthName by using bellow colde
const allTds = document.querySelectorAll('td')
// Find the td element that contains the text "BirthName"
const birthDateTd = Array.from(allTds).filter(td=>td.textContent==='BirthName')
After that you can target that <td> as you want.

You can do checking the text for all td and change where matches birthname
let element = document.querySelectorAll('td');
for(let i = 0; i<element.length; i++){
if(element[i].innerText == 'BirthName'){
element[i].innerText += '(Sidharth)';
}
}

If the text is unique then you can use Xpath as shown below and change it.
var td = document.evaluate("//td[contains(text(), 'BirthName')]", document, null, XPathResult.ANY_TYPE, null );
var thisTd = td.iterateNext();
thisTd.innerHTML = "BirthName (Sidharth)";
<table border="1">
<tbody>
<tr>
<td>Id</td>
<td>Name</td>
</tr>
<tr>
<td>12334567</td>
<td>BirthName</td>
</tr>
</tbody>
</table>

javascript - select nodes and all their child nodes inside tbody

I want to select all elements inside < tbody > and all their sub-elements so i can change a class using javascript.
For example, i want to change the class cl1 into cl2 in the following example
<table>
<thead>
....
</thead>
<tbody id="my-table">
<tr class="cl1 other-class">
<td>Some value</td>
<td class="cl1 other-class">Some value</td>
<td>Some value</td>
</tr>
<tr class="cl1 other-class">
<td class="cl1 other-class">Some value</td>
<td>Some value</td>
<td>
<a class="cl1 link" href="#">Some link</a>
</td>
</tr>
</tbody>
I want to use javascript for this, no jQuery
i managed to select all elements inside < tbody > like this :
document.getElementById("my-table").tBodies.item(0)
but i didn't know how to select each of their sub-elements or their sub-sub-elements.
for changing the class, i know i can use regular expressions to replace the class

Possible duplicate How to select all children of an element with javascript and change CSS property?
try (add an id to your tbody to make this work)
var descendants = document.getElementById('tbody').getElementsByTagName("*");
for(var i = 0; i < descendants.length; i++) {
descendants[i].classList.remove('cl1');
descendants[i].classList.add('cl2');
}

You said you managed to select <tbody> element, but you wanted to know how to select it's sub-elements or their sub-sub-elements. You do that with the children property which each element has. So this line gives you all children of <tbody> which are the <tr> (rows):
document.getElementById("my-table").tBodies.item(0).children;
Then if you get the children of each row, you get the cells. Example:
var tbody = document.getElementById("my-table").tBodies.item(0);
var rows = tbody.children;
var row1cells = rows[0].children;
var row2cells = rows[1].children;

Read all td values with Javascript

I am trying to get all td and compare each td value to a string .
but my code only reads the first td of each tr.
Here is my HTML :
<table border="2px" id="tab">
<tr>
<td>color</td>
<td> a </td>
<td> font</td>
<td>123</td>
</tr>
<tr>
<td>font</td>
<td> color </td>
</tr>
<tr>
<td>a</td>
<td> color</td>
<td> font</td>
</tr>
<tr>
<td>font</td>
</tr>
</table>
My js code:
var t=["color","font","a"];
function color()
{
var colr=0;
var tab=[];
var table = document.getElementById("tab");
var len=table.rows.length;
for (var i = 0; i< len; i++)
{
for (var j=0; j<table.rows[i].cells.length; j++)
{
tab[j]= table.rows[i].cells[j].innerHTML;
// alert(tab[j]);
if(tab[j]== t[0])
{ colr++;}
}
}
alert(colr);
}
What am I missing?

The spacing in the <td> is messing with the comparisons. As your code lies, you're comparing " color" to "color" and that's returning false, thus seeing as you're only getting that colr index going up to 1.
You'll need to strip out the spaces in order to compare properly, example JSFiddle here: https://jsfiddle.net/76q3aro3/

How to get values of tbody element from the Table using the Table id and without giving tbody ID using javascript not Jquery

I am looking for the elements inside the tbody of table without using the tbody Id or class. from below code i am looking for the values inside td for those who has tr classname tag.
<table id="tableId">
<thead>
</thead>
<tbody>
<tr>
value
</tr>
<tr class="className">
<td>
value
</td>
</tr>
<tr>
value
</tr>
<tr class="className">
<td>
value
</td>
</tr>
</tbody>
</table>

var tableId = document.getElementById('tableId');
var tBody = tableId.getElementsByTagName('tbody')[0];
var tableRow = tBody.getElementsByTagName('tr');
for (var t = 0; t < tableRow.length; t++){
console.log(tableRow[t].innerHTML)
}

How to find 2nd element with the same class as variable

Got a table with most of first cells in tr having first cell with the same value in a different tr. I'm going to use these for tr identification. Eventually, I want tds in these trs interact in a few diferent ways between themselves (pull data one and append into a different td, make calculations based on the data, etc). But for a start, I need all the doubled tr's have text the same color
html
<div class="tableclass">
<table>
<tbody>
<tr>
<td>id1</td>
<td>something else</td>
<td>1</td>
</tr>
<tr>
<td>id2</td>
<td>something else</td>
<td>2</td>
</tr>
<tr>
<td>id2</td>
<td>something else</td>
<td>3</td>
</tr>
<tr>
<td>id3</td>
<td>something else</td>
<td>4</td>
</tr>
<tr>
<td>id1</td>
<td>something else</td>
<td>5</td>
</tr>
<tbody>
</table>
<div>
and jquery
$(".tableclass table tbody tr").each(function(){
var trclass = $(this).find("td:first-child").html();
$(this).addClass(trclass);
$(this).parent().filter(trclass).eq(2).css('color','red');
});
And obviously, i'm doing something wrong.

You can try this:
var rows = $(".tableclass tbody tr");
var iterations = 0;
var rowNo = 0;
rows.each(function () {
var thisRow = $(this);
rowNo++;
if (!thisRow.hasClass('duplicate')) {
var trclass = thisRow.find("td:first-child").html();
var firstcols = thisRow.siblings('tr').find('td:first-child');
firstcols.each(function () {
if ($(this).html() == trclass) {
var dupeRow = $(this).parent();
var dupeRowNo = dupeRow.index() + 1;
thisRow
.addClass('duplicate')
.css({'color': 'red'})
.attr('title', 'Duplicated in row '+dupeRowNo);
dupeRow
.addClass('duplicate')
.css({'color': 'red'})
.attr('title', 'Duplicate of row '+rowNo);
iterations++;
}
})
}
});
//alert(iterations);
It is a little more compicated, but it identifies the duplicate rows without having to go through the each row twice. I added the iterations variable so you can see that it only goes and processes a tr if it has not already identified it before as having duplicates.
I added tooltips to the rows so you know which row is a duplicate of which.
You can see it on this jsfiddle.