Add data attribute with value from self - javascript

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);
});

Related

How to get the first td value using jquery

I have create a table with following style. Now I want to get first td value as 1,2,3 using jQuery.
<html>
<head>
<style type='text/css'>
table {
counter-reset: rowNumber;
}
table tr {
counter-increment: rowNumber;
}
table tr td:first-child::before {
content: counter(rowNumber);
min-width: 1em;
margin-right: 0.5em;
}
</style>
</head>
<body>
<table border="1" id="MyTable">
<tr>
<td></td> <td>blue</td>
</tr>
<tr>
<td></td><td>red</td>
</tr>
<tr>
<td></td><td>black</td>
</tr>
</table>
</body>
</html>
I tried with following script but it showing row counter as text. How to get the value of first td?
<script>
$("#MyTable").find('tr').each(function (i, el) {
$(this).find('td:eq(0)').each(function () {
console.log(window.getComputedStyle(this, ':before').content);
});
});
</script>
Based on this:
Generated content does not alter the document tree. In particular, it is not fed back to the document language processor.
So if you see the html that generated, you will see all td is empty while you see counter (1,2,3) in page. this is html generated:
But this is result:
So generated content does not alter the document tree and you can't access to value of it.
There are lots of alternative you can do it:
$("#MyTable").find('tr').each(function (i, el) {
debugger
$(this).find('td:eq(0)').each(function (index, el) {
$(this).html(i+1)
console.log($(this).html());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" id="MyTable">
<tbody>
<tr>
<td></td>
<td>blue</td>
</tr>
<tr>
<td></td>
<td>red</td>
</tr>
<tr>
<td></td>
<td>black</td>
</tr>
</tbody>
</table>
Update
You can rest number after each modification on your table:
function setnumber() {
$('#MyTable tbody tr').each(function (i) {
$($(this).find('td')[0]).html(i + 1);
});
}
$(".delete").click(function () {
$(this).closest('tr').remove();
setnumber();
});
setnumber();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" id="MyTable">
<tbody>
<tr>
<td></td>
<td>blue</td>
<td><span class="delete"><i class="fas fa-trash"></i>delete</span></td>
</tr>
<tr>
<td></td>
<td>red</td>
<td><span class="delete"><i class="fas fa-trash"></i>delete</span></td>
</tr>
<tr>
<td></td>
<td>black</td>
<td><span class="delete"><i class="fas fa-trash"></i>delete</span></td>
</tr>
</tbody>
</table>
Probably, you want to put 1,2,3 in TDS on DOM.
You can do like this:
$("#MyTable").find('tr').each(function (i, el) { $(el).find("td").eq(0).text(i); });
https://codesandbox.io/s/jquery-playground-forked-pmtgc?file=/src/index.js
You can use child selector to select the child of tr
jQuery("body > table > tr:nth-child(1) > td:nth-child(1)").text();

Get value of tbody td

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>

universal javascript selector to interact on all html element

I started on that http://jsfiddle.net/DRFBG/
And if I add tables so mytable1, mytable2,...
<table id="mytable1" border="1">
<tr><th>Column1</th><th>Column2</th><th>Column3</th><th>Column4</th></tr>
<tr class="data"><td>1st</td><td>1.1</td><td></td><td>1</td></tr>
<tr class="data"><td>2nd</td><td>2.01</td><td></td><td>2</td></tr>
<tr class="data"><td>3rd</td><td>3.001</td><td></td><td>3</td></tr>
<tr class="data"><td>4th</td><td>4.01</td><td></td><td>4</td></tr>
</table>
<table id="mytable2" border="1">
<tr><th>Column1</th><th>Column2</th><th>Column3</th><th>Column4</th></tr>
<tr class="data"><td>1st</td><td>1.1</td><td>1</td><td></td></tr>
<tr class="data"><td>2nd</td><td>2.01</td><td>2</td><td></td></tr>
<tr class="data"><td>3rd</td><td>3.001</td><td>3</td><td></td></tr>
<tr class="data"><td>4th</td><td>4.01</td><td>4</td><td></td></tr>
</table>
How could I uniform my javascript code for all tables?
I've already tried passing by table[div^=mytable]*, but the problem is the second selector in the function.
So any ideas please? Thank you? Sorry for my english
By the way, the code is to remove th with empty td for each table
$('#mytable2 th').each(function(i) {
var remove = 0;
var tds = $(this).parents('table').find('tr td:nth-child(' + (i + 1) + ')')
tds.each(function(j) { if (this.innerHTML == '') remove++; });
if (remove == ($('#mytable2 tr').length - 1)) {
$(this).hide();
tds.hide();
}
});
One approach is, selecting tables first and get their id and after that, doing the approach of http://jsfiddle.net/DRFBG/ on each of them like the following:
$('table').each(function()
{
var tb_id = $(this).attr('id');
$('#'+tb_id+' th').each(function(i) {
var remove = 0;
var tds = $(this).parents('table').find('tr td:nth-child(' + (i + 1) + ')')
tds.each(function(j) { if (this.innerHTML == '') remove++; });
if (remove == ($('#'+tb_id+' tr').length - 1)) {
$(this).hide();
tds.hide();
}
});
});
Here is the working jsfiddle
To select all on your page you can use "table" selector.
So you'd need to use $('table2 th') instead of $('#mytable2 th')
One possible solution would be to loop through each column of each table, then check if there are any non-empty cells. If there is not, then you can safely remove() all the td and th within that column.
Note that the removal needs to be done last, otherwise it will affect the indexing of the following columns. You can do that by simply marking the cells to be removed with a class, and then selecting that class once all loops complete. Try this:
$('table').each(function() {
var $table = $(this);
var rows = $table.find('tr').length - 1; // -1 to account for the headings
$table.find('th').each(function(i, th) {
var $empty = $table.find(`td:nth-child(${i + 1}):empty`);
if ($empty.length == rows)
$empty.add(this).addClass('to-remove');
})
$table.find('.to-remove').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable1" border="1">
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
</tr>
<tr class="data">
<td>1st</td>
<td>1.1</td>
<td></td>
<td>1</td>
</tr>
<tr class="data">
<td>2nd</td>
<td>2.01</td>
<td></td>
<td>2</td>
</tr>
<tr class="data">
<td>3rd</td>
<td>3.001</td>
<td></td>
<td>3</td>
</tr>
<tr class="data">
<td>4th</td>
<td>4.01</td>
<td></td>
<td>4</td>
</tr>
</table>
<table id="mytable2" border="1">
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
</tr>
<tr class="data">
<td>1st</td>
<td>1.1</td>
<td>1</td>
<td></td>
</tr>
<tr class="data">
<td>2nd</td>
<td>2.01</td>
<td>2</td>
<td></td>
</tr>
<tr class="data">
<td>3rd</td>
<td>3.001</td>
<td>3</td>
<td></td>
</tr>
<tr class="data">
<td>4th</td>
<td>4.01</td>
<td>4</td>
<td></td>
</tr>
</table>

Jquery from ouput element highlight matching element in table row

How to highlight
Victor and Steve....(and other from #output if is change)
Html
<div id="output">Victor,Steve</div>
<table border="0">
<tr><td>id</td><td>name</td><td>age</td></tr>
<tr><td>1</td><td>Victor</td><td>14</td></tr>
<tr><td>2</td><td>John</td><td>15</td></tr>
<tr><td>3</td><td>Steve</td><td>16</td></tr>
<tr><td>7</td><td>Michael</td><td>17</td></tr>
<tr><td>9</td><td>Michaela</td><td>20</td></tr>
</table>
jquery
var gg = $('#output').text();
$(document).ready(function(){
$('table tr').each(function(){
if($(this).find('td').eq(1).text() == gg){
$(this).css('background','red');
}
});
});
here the JSFiddle
You can use includes() to check if string contains sub-string.
var gg = $('#output').text();
$('table tr').each(function() {
if (gg.includes($(this).find('td').eq(1).text())) {
$(this).css('background', 'red');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output">Victor,Steve</div>
<table border="0">
<tr>
<td>id</td>
<td>name</td>
<td>age</td>
</tr>
<tr>
<td>1</td>
<td>Victor</td>
<td>14</td>
</tr>
<tr>
<td>2</td>
<td>John</td>
<td>15</td>
</tr>
<tr>
<td>3</td>
<td>Steve</td>
<td>16</td>
</tr>
<tr>
<td>7</td>
<td>Michael</td>
<td>17</td>
</tr>
<tr>
<td>9</td>
<td>Michaela</td>
<td>20</td>
</tr>
</table>
If you change your jQuery to this:
var gg = $('#output').text().split(',');
$(document).ready(function(){
$('table tr').each(function(){
var getName = $(this).find('td').eq(1).text();
if (jQuery.inArray(getName, gg) !== -1) {
$(this).css('background','red');
}
});
});
That should solve it.
var gg = $('#output').text().split(',');
$(document).ready(function(){
$('table tr').each(function(){
var getName = $(this).find('td').eq(1).text();
if (jQuery.inArray(getName, gg) !== -1) {
$(this).css('background','red');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output">Victor,Steve</div>
<table border="0">
<tr><td>id</td><td>name</td><td>age</td></tr>
<tr><td>1</td><td>Victor</td><td>14</td></tr>
<tr><td>2</td><td>John</td><td>15</td></tr>
<tr><td>3</td><td>Steve</td><td>16</td></tr>
<tr><td>7</td><td>Michael</td><td>17</td></tr>
<tr><td>9</td><td>Michaela</td><td>20</td></tr>
</table>
This is converting the gg variable into an array of names and then inside the each function we're checking if the name is in the array.
A "functional" style solution
var gg = $('#output').text()
$(document).ready(function(){
$('table tr').css('background', function(){
return (gg.indexOf($(this).find('td').eq(1).text())>=0 )? 'red' : 'transparent';
})
});

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