Develop Reference

Javascript get the last td of a table to remove/delete it

How can I get the last td of a table and remove it? It should be only JS, no jquery.
I tried this:
e.target.parentNode.querySelector("td:lastcell").remove();

var t = document.getElementById("test"); // The table
var lastTD = t.querySelector("TD:last-of-type");
console.log ("Text: " + lastTD.innerText);
<table id="test">
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>

element.children should get you all the children as an array you can get the last child simply by element.children[element.children.length -1] and do whatever you want with it.
Also if your table has an id you can get the last td by using document.querySelect('#table-id td:last-child') or use document.querySelectAll('#table-id td:last-child') to get all the last tds

How to compare several td.text() in tr using jQuery

<table>
<tr id="tr1">
<td id="td1"> test1 </td>
<td id="td2"> test2 </td>
<td id="td3"> test1 </td>
<td id="td4"> test3 </td>
</tr>
</table>
Here I have a table with a tr in it and 4 td's.
Now, my question is, how can I compare the td.text() with the other one?
For example:
a loop that takes the text of first td and then compare it with other td's.
If it is the same, then give that td a class.
HERE: td id="td1" should get a class
BUT:
When I'm at the 3e td, the 3e td should get a class.

This code should work for you:
var tds;
$('tr').each(function(i, item){
tds = $(this).find('td');
tds.each(function(j, elem1){
tds.each(function(k, elem2){
if($(elem1)[0] != $(elem2)[0] && $(elem1).text() == $(elem2).text()){
$(elem1).addClass('cl');
}
});
});
});
FIDDLE: https://jsfiddle.net/lmgonzalves/cqa6m6va/1/

You can use this code:
function setClasses(word) {
var tds = $("tr td");
for(var i = 0; i < tds.length; i++) {
if(tds.eq(i).text() === word) {
tds.eq(i).addClass('red');
}
}
}
setClasses("test1");

jQuery selectors will be your friend here. :)
var $container = $("#tr")
$container.children().each(function() {
if (!($(this).hasClass("td")) {
var sTextVal = $(this).text();
var $currTextGroup = $container.children(":contains('" + sTextVal + "')");
if ($currTextGroup.length > 1) {
$currTextGroup.addClass("td");
}
}
});
I'll explain the logic, and then touch on one issue to be aware of . . .
Basically, this code:
Collects all of the the children of the <tr> and loops through them one at a time
If the current child does not already have a class of "td" (if it already has a "td" class, then this text has already been checked for duplicates), it retrieves the text from inside the element and searches for all of the children of the <tr> that contain that same text value
If more than one of the children in the <tr> contain that text, all of those children are given the class of "td"
The one potential issue that this solution could run into is if the text in the current element is present as part of the text in one of its siblings. For example, if the text in one sibling is "the", and it has some siblings that have text values of "then" and "there" and "the end", they will be found by :contains.
If your text values are sufficiently "patterned" (as they are in your example), though, this should not be an issue. If it is an issue, there is a more complex way to do that "common text" selection, but I won't bother with that, unless it is necessary.

If I understand correctly, you want to select the first 'td' in a 'tr' and compare it against the other 'td' in your table. Please try the below code and let me know if it works for you.
HTML (provided by OP)
<table>
<tr id="tr1">
<td id="td1"> test1 </td>
<td id="td2"> test2 </td>
<td id="td3"> test1 </td>
<td id="td4"> test3 </td>
</tr>
</table>
CSS
.color--red { color: red; }
jQuery
$(document).ready(function(){
var first = $("#tr1 :first-child").html();
$('#tr1 :not(:first-child)').each(function() {
if(first == $(this).html()){
$(this).addClass("color--red");
}
});
});
I tried to keep it as simple as possible. The variable first pertains to that first 'td' that you want to use for comparison. Note how the each function operates on 'all elements except the first child in the tr', which clearly will omit the first variable we declared initially. From there it's all about comparing using $(this).html() to grab the value of the currently selected element, against the value obtained from the first variable.
Once this succeeds, simply add a class of your choice. For simplicity's sake, I added my own color--red class to the mix, which should show red color text for the third 'td' element as you suggested in your question post. Enjoy! Let me know if you need anything further.

Next <a> tag in table

I have a table that look like that :
<table>
<tbody>
<tr>
<td>
<a id="firstTAG" class="jp-play-me" data="foo"></a>
</td>
</tr>
<tr>
<td>
<a id="secondTAG" class="jp-play-me" data="bar"></a>
</td>
</tr>
<tr>
<td>
<a id="thirdTAG" class="jp-play-me" data="foobar"></a>
</td>
</tr>
</tbody>
</table>
And a javascript/jQuery function :
function getnextmedia(current) {
var res = current.split("/");
rowId = "#" + res[5];
$(".jp-play-me").each(function() {
if (this.id == rowId) {
alert(this.data);
alert($(this).next(".jp-play-me").attr("data"));
}
});
}
rowid is an id Im looking for in the table. I use the class jp-play-me to find all <a> tags and then compare id to get the good <a> tag. That works fine.
The next step is to get the following <a> tag in the table so the function can read the data attribute.
For exemple, if rowId is equal to secondTAG then I need to get the value foobar, which is the value of the following data <a> tag attribute.
I tried to use the next() method but I guess I do it the wrong way.
Let me know if you need more informations.

It's not working because the .next() method returns the immediately following sibling element. Since the anchor elements are not siblings, nothing is returned.
In order to get the anchor element in the next tr element, you would need to select the closest tr, then find the anchor element in the next tr:
$(this).closest('tr').next().find('.jp-play-me').attr("data");
$(".jp-play-me").each(function() {
if (this.id == rowId) {
// Next <a>
$(this).closest('tr').next().find('.jp-play-me').attr("data");
}
});
References:
.next()
.closest()
.find()

jQuery change number inside a name attribute

I'm writing some JavaScript to clone a table row containing form elements.
It's working well so far but there's one piece I can't quite figure out.
The element names have a number which increases with every row.
E.g:
<table>
<tbody>
<tr>
<td><input type="text" name="name[0][abc]" /></td>
<td><button class="add-row-button">+</button></td>
</tr>
<tr>
<td><input type="text" name="name[1][abc]" /></td>
<td><button class="add-row-button">+</button></td>
</tr>
</tbody>
</table>
I need the cloned row to update the number. There are multiple fields in each row which need this updated number so I can't just include the new name in the jQuery code. What I think has to happen is I need get the name, use a regex replace, then update the attribute.
Here's my current (simplified for the example) jQuery:
// Current num of elements. Names are 0 based so this will be the number used
// for the new name.
var formRowCount = $('table tr').length;
$('.add-row-button').click(function() {
// Clone the last row.
$(this).closest('tr').last().clone().insertAfter($(this).closest('tr'));
// Set the new field selector.
var $newRow = $(this).closest('tr').next();
$newRow.find('input[type="text"]').val('');
formRowCount++;
});
Can someone point me in the right direction. Before formRowCount++; I need to get the current element name and update the number with formRowCount.

Yeah, you can use regex if you want.
var formRowCount = $('table tr').length;
$('.add-row-button').click(function() {
// Clone the last row and insert it.
$(this).closest('tr').last().clone().insertAfter($(this).closest('tr'));
// Select the input field
var $newInput = $(this).closest('tr').next().find('input[type="text"]');
// Update the input value and name attribute
var newName = $newInput.attr('name').replace(/^(name\[)\d+(\].+)$/, '$1' + formRowCount + '$2');
$newInput.val('').attr('name', newName);
// Update the number
formRowCount++;
});

Iterate through second columns in a table in jQuery

I have table in the dom that looks like this
<div id="table">
<table>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
</div>
I want to iterate through this table, such as $('#table').each(function(){}) but I only want to iterate through the second column. So the ones which in this example have a value of b.
Any ideas how to do this?
Thank you!

Try this:
$("table tr td:nth-child(2)").each(function () {
});

Using the nth-child selector in jQuery, this should work:
$("#table").find("td:nth-child(2)").each(function () {
});
This uses the nth-child selector, http://api.jquery.com/nth-child-selector/ , which as the link states, would select all <td> elements that are the 2nd child of their parent (which would be a <tr>).
Here's a fiddle that demonstrates it: http://jsfiddle.net/GshRz/
If you are looking for a selector that gets the <td>s that are only immediately in the table (like not in a nested table), then use something like:
$("#table").children("tbody").children("tr").children("td:nth-child(2)").each(function () {
});
http://jsfiddle.net/GshRz/1/
Depending on your structure (where you might include a <thead>), you could use .children("thead, tbody") instead of just .children("tbody").
Also, in case you want to be grabbing several columns, it could be easier to select the <tr> elements and then get their children <td> elements. For example:
$("#table1").children("tbody").children("tr").each(function (i) {
var $this = $(this);
var my_td = $this.children("td");
var second_col = my_td.eq(1);
var third_col = my_td.eq(2);
console.log("Second Column Value (row " + i + "): " + second_col.html());
console.log("Third Column Value (row " + i + "): " + third_col.html());
});
http://jsfiddle.net/GshRz/2/
What selectors you use and where, is up to the structure and content of your table. So remember to differentiate between children and find, and nth-child and eq.

$("#table td:nth-child(2)").each(function (index) {
alert('Row no. ' + (index+1) + ', Column 2 : ' + $(this).html());
});
Sample