We Keep Coding

How to obtain text of a <td> element from another <td> element with jquery

I am trying to use a button inside a table division to set a variable as the same value as another division in the same row, but whenever I run my code (below), it returns the value of all the table divisions concatenated together. I am unsure why this was happening, so I replaced '.children()' with 'childnodes[0]' to try and get only the first name, but this just doesn't work and I don't why.
My html looks like this:
<table>
<tr>
<td>John</td>
<td>Doe</td>
<td><button>Get First Name</button></td>
</tr>
</table>
And my Javascript is this:
$(document).ready(function(){
$("button").click(function(){
var first = $(this).closest("tr").childNodes[0].text();
alert(first)
})
});

set a variable as the same value as another division in the same row
there are lots of possibilities for this, here are some (with the most useful first (opinion based))
$("button").click(function() {
var first = $(this).closest("tr").find("td:first").text();
var first = $(this).closest("tr").find("td").first().text();
var first = $(this).closest("tr").find("td").eq(0).text();
var first = $(this).closest("tr").children().first().text();
var first = $(this).closest("tr").children().eq(0).text();
var first = $(this).closest("td").siblings().first().text();
});
it returns the value of all the table cells concatenated together
https://api.jquery.com/text
Get the combined text contents of each element in the set of matched elements, including their descendants, or set the text contents of the matched elements.
because you're passing the "tr" to text() it gets the text of all the cells (tds) and their content etc and combines them as one, so you need to limit to the first as you've attempted.
however .childNodes[0] can only be applied to a DOM element/node, while $(this).closest("tr") gives you a jquery object/collection, which doesn't have .childNodes property.
So the jquery equivalent would be to use .children().eq(0).

You could use class identifiers to get information you need as well.
<table>
<tr>
<td><span class="first-name">John</span></td>
<td><span class="last-name">Doe</span></td>
<td>
<button class="btn-get-data" data-class="first-name">Get First Name</button>
<button class="btn-get-data" data-class="last-name">Get Last Name</button>
</td>
</tr>
</table>
$(document).ready(function() {
$(".btn-get-data").click(function() {
$btn = $(this);
$tr = $btn.closest('tr');
var first = $tr.find('.' + $btn.attr('data-class')).html();
alert(first);
})
});
If you make the button click generic like so, you can add additional buttons on the page and use that to get the class within that row.
Here is a working fiddle example: https://jsfiddle.net/b1r0nucq/

you could find the :first child and get his html(), as below:
$(document).ready(function() {
$("button").click(function() {
var first = $(this).closest("tr").children(":first").html();
alert(first)
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>John</td>
<td>Doe</td>
<td><button>Get First Name</button></td>
</tr>
</table>

How to apply hyperlinks to URL text in existing HTML - UPDATED WITH JSFIDDLE & WORKING SOLUTION

UPDATE: http://jsfiddle.net/daltontech/qfjr7e6a/ - Thanks to both that helped!
Original question:
I get JSON data from a report in my HelpDesk software that I import into an HTML table (via Python) & one of the columns is the address of the request, but it is not clickable. I can edit the Python file (though I don't expect the answer is there) and the HTML file (and Javascript is both fine and expected to be the solution), but I cannot change the JSON data (much).
I can use JQuery, but if vanilla Javascript can do it, that is my preference.
I tried innerHTML (with and without global flag), but after about 20 rows, it fails spectacularly in IE & Chrome (all I tested) & this list is typically 50+.
I do use innerHTML successfully in other places, mainly linking technician names to their requests (a shorter list) like:
{ document.body.innerHTML = document.body.innerHTML.replace('Jenny', 'Jenny'); }
Here's what I have to work with:
<table class="Requests" id="Requests">
<thead><tr><th>URL</th><th>Title</th><th>Technician</th></tr></thead>
<tr><td>https://helpdesk.domain.com/8675309</td><td>I need a phone number</td><td>Jenny</td></tr>
<tr><td>https://helpdesk.domain.com/8675310</td><td>Some other issue</td>
<td>John</td></tr>
</table>
Everything before the number is always the same, so that gives some flexibility and I can have the JSON file provide a few options (just not the <a> tag...) like:
1. 8675309
2. https://helpdesk.domain.com/8675309
3. sometext8675309
4. sometext8675309someothertext
I'm hoping to accomplish either of the two row examples - either works, might prefer latter:
<table class="Requests" id="Requests">
<thead><tr><th>URL</th><th>Title</th><th>Technician</th></tr></thead>
<tr><td>https://helpdesk.domain.com/8675309</td><td>I need a phone number</td><td>Jenny</td></tr>
<tr><td>link</td><td>Some other issue</td><td>John</td></tr>
</table>

Commented Code:
// get the elements
document
.querySelectorAll(".Requests > tbody > tr > td:first-child")
// for each element remove the text and
// replace it with an anchor tag
// use the original element's text as the link
.forEach(c => {
let a = Object.assign(document.createElement("a"), {
href: c.textContent,
textContent: c.textContent
});
c.textContent = "";
c.appendChild(a);
});
Example Snippet
document
.querySelectorAll(".Requests > tbody > tr > td:first-child")
.forEach(c =>
c.parentNode.replaceChild(Object.assign(document.createElement("a"), {
href: c.textContent,
textContent: c.textContent
}), c)
);
<table class="Requests" id="Requests">
<thead>
<tr>
<th>URL</th>
<th>Title</th>
<th>Technician</th>
</tr>
</thead>
<tr>
<td>https://helpdesk.domain.com/8675309</td>
<td>I need a phone number</td>
<td>Jenny</td>
</tr>
<tr>
<td>https://helpdesk.domain.com/8675310</td>
<td>Some other issue</td>
<td>John</td>
</tr>
</table>

If I understand your question right, you want to use client-side JS to modify an already generated HTML table.
The below code works for me with +200 rows so I don't think using .innerHTML has an inherent issue, maybe there is something else causing your code to crash?
EDIT (IE):
let rows = document.querySelectorAll('#Requests tr');
for (let i = 1; i < rows.length; i++) {
rows[i].getElementsByTagName('td')[0].innerHTML = '<a href="' + rows[i].getElementsByTagName('td')[0]
.innerHTML + '">' + rows[i].getElementsByTagName('td')[0].innerHTML + '</a>';
}
let rows = document.querySelectorAll('#Requests tr');
rows.forEach(function(r, i) {
if (i > 0) {
r.getElementsByTagName('td')[0].innerHTML = '' + r.getElementsByTagName('td')[0].innerHTML + ''
}
});

Adding a new cell to an already existing row

I am new to javascript and I am trying to insert a new cell using only DOM properties and methods into an already existing row without hard-coding or using an index. I am trying to add a new tag. The cell needs to go first because I am adding in formation about that corresponds to that row. Any help would be appreciated. So far I have the following:
var firstTable = document.getElementsByTagName("music
header").nextChild();
console.log(firstTable);
var findRow = firstTable.getElementsByTagName("td");
console.log(findRow);
<div id = "music">
<h2 id = "music header">Music</h2>
<table style="width:100%">
<tr id = "Hard Rock">
<td>NEW CELL HERE</td>
<td>Saint Asonia</td>
<td>Shinedown</td>
<td>Breaking Benjamin</td>
<td>Rise Against</td>
<td>Three Days Grace</td>
</tr>
<tr id = "Metal">
<td>Bullet for my Valentine</td>
<td>Metallica</td>
<td>Korn</td>
<td>Asking Alexandria</td>
<td>Alexisonfire</td>
</tr>
<tr id = "Country">
<td>Toby Kieth</td>
<td>Keith Urban</td>
<td>Taylor Swift</td>
<td>Kenny Chesney</td>
<td>Miranda Lambert</td>
</tr>
</table>
</div>

The code:
var firstTable = document.getElementsByTagName("music
header").nextChild();
console.log(firstTable);
isn't going to work because:
getElementsByTagName expects a tag name, not an ID
getElementsByTagName returns a (possibly empty) collection, not a single element, and that collection doesn't have a nextChild method.
nextChild is not a valid property of any standard DOM object, perhaps you want nextElementSibling, which is a property, not a method
The id "music header" is invalid as the ID attribute value can't contain white space.
To find the first table in the document, you can use:
var firstTable = document.getElementsByTagName('table')[0];
To get the first row of the table, you can use:
var firstRow = firstTable.rows[0];
The index for rows can be any value from 0 to firstTable.rows.length - 1.
To get the first cell of the row:
var firstCell = firstRow.cells[0];
What you do next is up to you…

Since you have the parent element and you've found the first child you can try:
parent.insertBefore(el, parent.firstChild);
Here is the link to the .insertBefore docs on MDN
and here is the docs for firstChild on MDN

It's difficult to know from your question exactly what it is you're trying to achieve. That said, building on Sgnl and RobG's answers and the points the latter made about your structure and references, here is some food for thought.
I assume you want to find the table within a section. You can do that by finding the section first by the id, and then the table beneath that:
var firstTable = document.getElementById("music").getElementsByTagName("table")[0];
Your HTML example implies you then want to add a cell to the first row. You can find that row within the previously found table as so:
var findRow = firstTable.rows[0];
Now that we've found our insert location, let's construct our new cell
var newCell = document.createElement("td");
var newTag = document.createElement("span");
var newText = document.createTextNode("NEW CELL HERE");
newCell.appendChild( newTag );
newTag.appendChild( newText );
With the node built, let's insert it
findRow.insertBefore( newCell, findRow.childNodes[0] );
Here is a working JS Fiddle demonstration

Check if variable exists in a html table with javascript

I have two tables at the moment. What Im looking to achieve is to select a row in one table, obtain the "filename" field from that and then check if that filename exists in the other table. If the file exists in both tables I want to change the colour of my progress tracker. Right now I have the selecting of the row working, but I can't seem to check it against the other table. Any help would be greatly appreciated.
HTML:
<table id="table">
<tr>
<td>--</td>
<td>Filename</td>
</tr>
<tr>
<td>1</td>
<td>Example1</td>
</tr>
<tr>
<td>2</td>
<td>Example2</td>
</tr>
</table>
<table id="table2">
<tr>
<td>--</td>
<td>Filename</td>
</tr>
<tr>
<td>1</td>
<td>Example1</td>
</tr>
</table>
<div id="words">
</div>
JavaScript:
$("#table").find("tr").click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
var value=$(this).find('td:nth-child(2)').html();
//alert(value);
document.getElementById("words").innerHTML = value;
});
Thanks again for the help!

$("#table").on('click','tr',function(){ // <-- #1
var $this = $(this), // <-- #2
filename = $this.find('td:nth-child(2)').text(), // <-- #3
$words = $('#words');
$this.addClass('selected').siblings().removeClass('selected');
$words.html(filename).css('color','black');
if ( valueInTable('table2', 1, filename ) ){ // <-- #4
$words.css('color', 'blue');
}
});
function valueInTable(tableID, columnNum, searchString){
var found = false;
$( '#' + tableID + ' tr td:nth-child(' + columnNum + ')' ).each(function(){
if ($(this).text() == searchString ){
found = true;
return false;
}
});
return found;
}
This is important, this binds the event to the table. When a click occurs somewhere inside the table it checks the event registry, in this case, it checks to see if a TR was clicked. This is both a performance gain, since you're not creating an event for each row of the table, but also if you create new rows dynamically, you don't have to create a new event when you do. You create this event once and it's in place for all new/old rows of the table
Cache $(this) into a variable. You use it more than once and chances are you'll use it even more. You should not create a new jQuery object every time you want to refer to $(this), so stick it in a variable and reuse that
While .html() may work for you, if you have other embedded HTML, you might get values you were not intending (e.g., <span>filename</span>), for that reason, you only need .text(), which will just give you the text value and strip off all the nested HTML (leaving you with only filename)
Using a function comes with a penalty, but it's good to put long-logic elsewhere, in case you're doing anything more involved. For instance, your table could expand in width (number of columns) and you might also want to search them for a value, or you might have more tables you want to look in; this same function can be used for both of those cases.
as noted, the :contains() selector was built for what you're after However, there is one caveat. The problem with contains is that it lacks customization. If you want to modify your comparison to be a RegEx, or if you want to perform other manipulation using trim or truncate, you can't do that with contains. You could easily modify the code below to do: $.trim( $(this).text() ) == $.trim( searchString )

As #Pete commented, you can use if ($('#table2 td:contains(' + value + ')').length) as follows
$("#table").find("tr").click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
var value=$(this).find('td:nth-child(2)').html();
//alert(value);
if ($('#table2 td:contains(' + value + ')').length) {
document.getElementById("words").innerHTML = value;
} else {
document.getElementById("words").innerHTML = "false";
}
});
See the JSFiddle for working example: https://jsfiddle.net/v14L4bqr/

javascript, dynamic id for table:how to recognize?

In my application i use a framework that generates a table with the id of the cells at Run-Time in ascending order.
So that i have "ElementX1X1" for row1 and column1, "ElementX1X2" for row1 and column2 etcetc...
The HTML structure generated will be:
<tr>
<td class="my_msg" align="left">
<id="ElementX1X1">
what i can set is the class(my_msg) and the content of the cell(of the table).
I want simply make:
var test=document.getElementById("ElementX1X1");
test.onclick=function();
but i'm not able to recognize the cell...
i want to make getElementById only if it is in the class "my_msg" or only if it has a certain content(as i said the only two things i can set)...
Anyone has any idea on how i can solve the problem?!
Thanks in advance!

Update the HTML to:
<td id="ElementX1X1" class="my_msg" >...
Edited - to work around broken framework:
<tr>
<td class="my_msg" align="left">
<id="ElementX1X1">
some content
</td>
<td class="my_msg" align="left">
<id="ElementX1X2">
some content
</td>
</tr>
If you want to find row 1 column 2, you can cheat using a bit of jQuery to inspect the contents of the element:
var row = 1;
var column = 2;
var matched = null;
$(".my_msg").each({
if($(this).html().indexOf('<id="ElementX' + row + 'X' + column + '">')!=-1){
matched = $(this);
}
});
matched will either point to the element you're looking for or null - but if you already know the row and column id's of the cells then why not just walk the DOM?
var row = 1;
var column = 2;
var matched = null;
var table = document.getElementsByTagName("TABLE")[0]; // up to you how your find it
try {
matched = table.getElementsByTagName("TR")[row-1].getElementsByTagName("TD")[column-1];
}
catch(err) {
// not found
}
Or the brute force way (i.e. fix the framework output):
var table = $("#tableid"); // up to you how your find it
table.html(table.html().replace(/">\n<id="/g,'" id="'));
your code is now:
<tr>
<td class="my_msg" align="left" id="ElementX1X1">…</td>
<td class="my_msg" align="left" id="ElementX1X2">…</td>
…
so you can use
$("#ElementX2X1");
to select the first row, second column
Neither is particularly elegant, but should get the job done while you wait for your buggy framework to be fixed ;)