Get value of tbody td - javascript

I saw other questions and answers and doesn't meet my need.
<thead>
<tr>
<td>a2</td>
<td>a2</td>
</tr>
<tbody>
<tr>
<td>a2</td>
<td>a2</td>
</tr>
<tr>
<td>4d</td>
<td>a23</td>
</tr>
</tbody>
<script>
$('tr').on("click", function(){
var id = $(this).find('tbody tr td').eq(2).text(); //here
alert(id);
});
</script>
I want to get tbody td not thead td, and i tried above code on script.
But alert does occur with no value.(empty alert)
Hm... did I type something wrong?

Below script will get the value of the first td of the tbody tr
<table>
<thead>
<tr>
<td>a2</td>
<td>a2</td>
</tr>
</thead>
<tbody>
<tr>
<td>a2</td>
<td>a2</td>
</tr>
<tr>
<td>4d</td>
<td>a23</td>
</tr>
</tbody>
</table>
<script>
$('tbody tr').on("click", function(){
var id = $(this).find('td:first-child').text(); //here
alert(id);
});
</script>
If you want to get the value of each td clicked you can use:
$('tbody td').on("click", function(){
var id = $(this).text(); //here
alert(id);
});

this inside a jQuery handler will refer to the element that triggered the event - you're using $('tr').on, so this will refer to a tr. But trs don't have tbody children, so $(this).find('tbody ... doesn't work. Instead, since you're starting from the tr, just .find tds. Also note that since you only have two tds in each tr, .eq(2) will always be empty (array-like collections are zero-indexed in Javascript) - if you want the second td's text, you should use .eq(1) instead.
$('tr').on("click", function() {
var id = $(this).find('td').eq(1).text();
console.log(id);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<td>a2</td>
<td>a2</td>
</tr>
<tbody>
<tr>
<td>a2</td>
<td>a2</td>
</tr>
<tr>
<td>4d</td>
<td>a23</td>
</tr>
</tbody>
</table>

The problem with your script is that :
<script>
$('tr').on("click", function(){
var id = $(this).find('tbody tr td').eq(2).text(); //here
alert(id);
});
</script>
1) You are referring to column 2, which does not exist.
2) Moreover, writing "find('tbody tr td')" will search for another tbody tr and td tags within the "$('tr').on("click", function()" that you are searching for, which doesn't exist either, hence alert returns blank. So try this script and let me know if it works!
<script>
$('tbody tr').on("click", function(){
var id = $(this).find('td').eq(0).text();
alert(id);
});
</script>

Related

Add event listener to dynamically create table row

I have a table with ajax call to create rows within the tbody element. I have the table created on the html page.
<table id='mytable'>
<thead>
<tr>
<th>First Col</th>
<th>Second Col</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
My javascript code to attach the event to second cell of each row in tbody
$('#mytable tbody').on( 'click', 'tr td:eq(2)', function() {
console.log($(this).html())
});
This code only works for the second cell of the first row of the tbody. Clicking the second cell of all other rows did not trigger the event. I have to work around this by check the cell index
if (this.cellIndex == 2) console.log($(this).html())
I still want to know how to make the correct selection.
To select the specific td of each row use nth-child() instead of eq():
$('#mytable tbody').on( 'click', 'tr td:nth-child(3)', function() {
console.log($(this).html())
});
You can just have an event listener for the entire table and then test what was clicked. Adding the event listener to the table you don't need to assign it again if the content of the table changes.
Adding a class name can both be useful for the usability (styling the cursor) and easier to find elements using JS.
document.getElementById('mytable').addEventListener('click', e => {
let td = e.target.closest('td[class="clickable"]');
if (td) {
console.log(e.target.innerText, 'was clicked');
}
});
td.clickable {
cursor: pointer;
}
<table id='mytable'>
<thead>
<tr>
<th>First Col</th>
<th>Second Col</th>
</tr>
</thead>
<tbody>
<tr>
<td>First</td>
<td class="clickable">Second 1</td>
</tr>
<tr>
<td>First</td>
<td class="clickable">Second 2</td>
</tr>
<tr>
<td>First</td>
<td class="clickable">Second 3</td>
</tr>
<tr>
<td>First</td>
<td class="clickable">Second 4</td>
</tr>
</tbody>
</table>

Get tbody next to one below the current tbody

I have a SharePoint table and would like to get the tbody of the table right one below the tbody with groupstring.
Sample table
<tbody groupstring=“%3B%23Application%3B%23”>
<tr><td> : Application </td></tr></tbody>
<tbody></tbody>
<tbody>
<tr><td><a href=“https://link1.com”>Link 1</a></td></tr>
<tr><td><a href=“https://link3.com”>Link 3</a></td></tr>
</tbody>
I will be getting another link Link2 from Json and dynamically inserting it between Link1 and Link3 with Jquery
var addRow=function(url,displayName){
Var counter=0;
$(‘tbody[groupstring=“%3B%23Application%3B%23”]’).closest(‘tbody’).find(‘td’).each(function(){
counter++;
If($(this).find(‘td:eq(0)’).text() > displayName){
$(this).before(makeRow(url,displayName));
} else {
If($(this).find(‘td:eq(0)’).text() === displayName){
$(this).html(makeRow(url,displayName));
Return false;
}}
If($(this).closest(‘table’).find(‘td.md-vb2’).length === counter){
$(this).parent().after(makeRow(url,displayName));
}
});
};
Var makeRow = function(url,displayName){
return (‘<tr><td><a href=“‘ + url + ‘”>’+displayName+’</a></td></tr>’);
};
I am trying to add the dynamic Link2 between Link1 & Link3 as anchor by placing in between or replace if already exists by addRow function.
My problem is that I can insert in the tbody after the tbody with groupstring but I want to insert in tbody one after the blank tbody.
Can somebody help modify:
$(‘tbody[groupstring=“%3B%23Application%3B%23”]’).closest(‘tbody’).find(‘td’).each(function(){
To access/get the tbody* one after the blank tbody?
I even tried:
$(‘tbody[groupstring=“%3B%23Application%3B%23”]’).closest(‘tbody’).next(‘tbody’).find(‘td’).each(function(){
And
$(‘tbody[groupstring=“%3B%23Application%3B%23”]’).closest(‘tbody’).closest(‘tbody’).find(‘td’).each(function()
But it did not work.
Any help is much appreciated.
$('tbody[groupstring]').nextAll('tbody:eq(1)') should do it.
Demo:
$(function() {
var $target = $('tbody[groupstring]').nextAll('tbody:eq(1)');
console.log($target.html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody groupstring="%3B%23Application%3B%23">
<tr>
<td>Application</td>
</tr>
</tbody>
<tbody></tbody>
<tbody>
<tr>
<td>Link 1</td>
</tr>
<tr>
<td>Link 3</td>
</tr>
</tbody>
</table>
Also note that groupstring is not a valid HTML attribute.

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.

Add data attribute with value from self

I've got a table to which I'd like to add a attribute 'data-order' to every last child of every row. See the table below.
<table id="table_id" class="display">
<tbody>
<tr>
<td>Test</td>
<td>255 500</td>
</tr>
</tbody>
</table>
I'd like to add the value of the last td to the attribute.
Before : <td>255 500</td>
After : <td data-order"255 500">255 500</td>
I use $(this).text() to get the value from the td but it doesn't seem to work the way I thought. I get weird data with multiple table rows included. I use this Javascript code to add the attribute.
$(document).ready(function() {
$( '#table_id tbody tr td:last-child').attr( 'data-order', $(this).text());
});
</script>
What is wrong my code ? Thanks.
At this point this doesn't refer to your $( '#table_id tbody tr td:last-child')
I think you must declarate a var, something like this could help you
var $MyObject = $( '#table_id tbody tr td:last-child');
$MyObject.attr( 'data-order', $MyObject.text());
if you have multiple line in you table you could use this in a each loop.
Example case
<table id="table_id" class="display">
<tbody>
<tr>
<td>Test</td>
<td>255 500</td>
</tr>
<tr>
<td>Test1</td>
<td>255 5001</td>
</tr>
<tr>
<td>Test2</td>
<td>255 500</td>
</tr>
</tbody>
</table>
$( '#table_id tbody tr td:last-child').each(function(){
var $MyObject = $(this); // this here referer to the current object of the loop
$MyObject.attr( 'data-order', $MyObject.text());
});
You can do it like this
var lastTd = $( '#table_id tbody tr td:last-child');
lastTd.attr( 'data-order', lastTd.html());
Please take a look at below code snippet:
$(document).ready(function() {
$( '#table_id tbody tr').each(function(){
$(this).find('td:last-child').attr( 'data-order', $(this).find('td:last-child').text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="table_id" class="display">
<tbody>
<tr>
<td>Test</td>
<td>255 500</td>
</tr>
<tr>
<td>Test1</td>
<td>2551 5001</td>
</tr>
<tr>
<td>Test2</td>
<td>2552 5002</td>
</tr>
</tbody>
</table>
Used to .each function as like this
$(document).ready(function(){
$('#table_id tr td:last-child').each(function(){
var thisText = $(this).text();
$(this).attr('data-order',thisText);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="table_id" class="display">
<tbody>
<tr>
<td>Test</td>
<td>255 500</td>
</tr>
<tr>
<td>Test</td>
<td>255 500</td>
</tr>
</tbody>
</table>
$(document).ready(function () {
$('#table_id tr td:last-child').each(function () {
$(this).attr('data-order', $(this).text());
});
});
You can simply use the data()
$('#table_id tr td:last-child').each(function(){
var text= $(this).text();
$(this).data('order',text);
});

traverse through whole table and check span tag atrribute name

HTML:
<table id="mytable">
<tr>
<td class="cssred"><span name='478'>john</span></td>
</tr>
<tr>
<td class="cssred"><span name='478'></span></td>
</tr>
<tr>
<td class="cssred"><span name='478'></span></td>
</tr>
<tr>
<td class="cssred"><span name='521'></span></td>
</tr>
<tr>
<td class="cssred"><span name='522'></span></td>
</tr>
</table>
JavaScript:
$(this).find('span').attr('name');
i have to traverse through whole table and check any span tag atrribute name value be 478 then make its parent cell class cssgreen.
$("#mytable td:has(span[name='478'])").toggleClass("cssred cssgreen");
or
$("#mytable span[name='478']").parent().toggleClass("cssred cssgreen");
DEMO: http://jsfiddle.net/E55jb/
Try this
$('#mytable span').each(function() {
if($(this).attr('name') == "478") $(this).parent().removeClass('cssred').addClass('cssgreen');
});
or easier
$('#mytable span[name=478]').parent().removeClass('cssred').addClass('cssgreen');
try this
$('span[name="478"]').each(function(){
$(this).parent().removeClass("cssred");
$(this).parent().addClass("cssgreen");
})
Solution:
$("#mytable span").each(function() {
if($(this).attr("name") == "478"){ // check if name=478
$(this).parent().removeClass("cssred"); // remove red bg
$(this).parent().addClass("cssgreen"); // add green bg
});

Categories