How to get value from TD column using this.value - javascript

<table>
<tr onClick = "alert(this.FirstTDValue);" >
<td>123</td>
<td>Hello</td>
<td>Goodbye</td>
</tr>
</table>
How would this.FirstTDValue be accomplished so that alert would show '123', would it be efficient to request it at the TR or the Table level?


Table rows have a cells collection that is a live NodeList of the cells, so:
alert(this.cells[0].textContent || this.cells[0].innerText);
Or perhaps:
alert(this.cells[0].firstChild.data);


<tr> elements have a cells collection that lets you access the child <td> elements:
this.cells[0].innerHTML


Something like...
<tr onClick = "getTD();" >
<td>123</td>
<td>Hello</td>
<td>Goodbye</td>
</tr>
<script type="text/javascript">
function getTD(){
alert(document.body.getElementsByTagName("td")[0]);
}
</script>


This is how I did it:
<script>
Element.prototype.FirstTDValue = function() {
for (var i = 0; i< this.childNodes.length; i++) {
if (this.childNodes[i].tagName == 'TD') {
return this.childNodes[i].innerHTML;
}
}
return ("No TD Values");
}
</script>
<table>
<tr onClick = "alert(this.FirstTDValue())" >
<td>123</td>
<td>Hello</td>
<td>Goodbye</td>
</tr>
</table>


jQuery Solution:
<tr onClick="alert( $(this).children().first().text() )" >

Related

How to loop through a table and get the td elements to follow a condition

I just want make so it the tr hides when the td does not follow the requirements, tried with jQuery and JavaScript, don't know what's wrong.
$(document).ready(function(){
$("td").each(function() {
var id = $(this).attr("price_search");
if (id > value4 && id < value5) {
$(this).hide;
}
else {
$(this).hide;
}
});
});

You can do this.
Hope this will help you.
$(document).ready(function() {
var value4 = 2;
var value5 = 4;
$("td").each(function() {
var id = $(this).attr("price_search");
if (id > value4 && id < value5) {
$(this).hide();
} else {
$(this).show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td price_search="3">10</td>
<td price_search="2">20</td>
<td price_search="3">30</td>
</tr>
</table>

I am going to go out on a limb here and make broad assumptions on content not in the question.
Your .hide; is invalid syntax
You are missing value for two variables value4 and value4 which frankly are not well named variables at all. I will make an assumption that those are better named and that they come from somewhere during the page rendering.
I make an assumption that you have something you want to filter/hide by those upper/lower price points.
I make the assumption the attribute might contain values that need to be parsed (not a number as they are)
var lowerPricePoint = .45;
var upperPricePoint = 5.25;
$(function() {
$("td").filter('[price_search]').each(function() {
// parse out a price from perhaps formatted values
let price = Number.parseFloat($(this).attr("price_search").replace(/\$|,/g, ''));
// toggle visibility of the row
$(this).closest('tr').toggle(price > lowerPricePoint && price < upperPricePoint);
});
});
td {
border: solid black 1px;
padding: 0.4em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<table>
<tr>
<td>Wear it</td>
<td price_search="123.13">Shoes</td>
</tr>
<tr>
<td>Drive it</td>
<td price_search="$23,123.13">Car</td>
</tr>
<tr>
<td>Drink it</td>
<td price_search="3.13">Beet Juice</td>
</tr>
<tr>
<td>Eat it</td>
<td price_search="12.13">Can of expensive corn</td>
</tr>
<tr>
<td>Cheap</td>
<td price_search="35">Radish</td>
</tr>
<tr>
<td>Use it</td>
<td price_search="1.45">Paper towel</td>
</tr>
<tr>
<td>Plain</td>
<td price_search="$1.87">Butter</td>
</tr>
<tr>
<td>Herb</td>
<td price_search="$2.45">Butter</td>
</tr>
<tr>
<td>Cheap</td>
<td price_search="15">Gum</td>
</tr>
</table>

Reverse table rows top row go on bottom without change the position of th, HOW?

I use the HTML code.
I have a table and I write in first tr td "A" and "B" in second tr td
I have these two rows
but I want to print "B" in first tr and "A" in second
!! But I don't want to change my th position!!
Is it possible with any script like js or Jquery or with any type js CDN....??
<table id='table1'>
<tr>
<th>name</th>
</tr>
<tr>
<td>A</td>
</tr>
<tr>
<td>B</td>
</tr>
</table>

Give this a try:
Your script
$(function(){
$("tbody").each(function(elem,index){
var arr = $.makeArray($("tr",this).detach());
arr.reverse();
$(this).append(arr);
});
});
The second way to do the same will be like this:
var tbody = $('table tbody');
tbody.html($('tr',tbody).get().reverse());
I hope this helps! Thanks!

You can swap the .textContent of the <td> children of the <tr> elements
const {rows:[{cells:[a]}, {cells:[b]}]} = table1;
[a.textContent, b.textContent] = [b.textContent, a.textContent];
<table id='table1'>
<tr>
<td>A</td>
</tr>
<tr>
<td>B</td>
</tr>
</table>

Since you can use reverse() with an array, you can use get() to convert this to an array first. If you have a dynamic number of rows you can use something like this:
$('tbody').each(function(){
var row = $(this).children('tr');
console.log(row)
$(this).html(row.get().reverse())
})

Use this below code:
$(function(){
$("tbody").each(function(elem,index){
var arr = $.makeArray($("tr",this).detach());
arr.reverse();
$(this).append(arr);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='table1'>
<tbody>
<tr>
<td>A</td>
</tr>
<tr>
<td>B</td>
</tr>
<tr>
<td>C</td>
</tr>
</tbody>
</table>

You can loop through each row, starting at the bottom and add it to the bottom - this will reverse the rows.
This will mean you don't need to load all the rows into an array, but will mean additional DOM manipulation.
var tbl = $("#table1>tbody")
var l = tbl.find("tr").length;
for (var i=l; i>=0; --i)
{
tbl.find("tr").eq(i).appendTo(tbl);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='table1'><tbody>
<tr> <td>A</td> </tr>
<tr> <td>B</td> </tr>
<tr> <td>C</td> </tr>
<tr> <td>D</td> </tr>
<tr> <td>E</td> </tr>
</tbody></table>

Problem Solved
<script type="text/javascript">
var trCount = $('#table1 tr').length;
var $rows = [];
for (var i = 0; i < trCount; i++)
$rows.push($('#table1 tr:last-child').remove());
$("#table1 tbody").append($rows);
</script>
Thanks to all

You can do that with pure vanilla JS, you don't need jquery or any other library for that.
function reverseOrder(table) {
const rows = table.querySelector('tbody').children;
const swaptemp = rows[0].children[0].innerHTML;
rows[0].children[0].innerHTML = rows[1].children[0].innerHTML;
rows[1].children[0].innerHTML = swaptemp;
}
const tableToReserveOrder = document.getElementById('table1');
reverseOrder(tableToReserveOrder);
<table id='table1'>
<tr>
<td>A</td>
</tr>
<tr>
<td>B</td>
</tr>
</table>
This is just a demonstration for your use case, you can play around with value of n which is 0 for this case where n+1 is 1.

How can you target a child element of an iterated object in JavaScript?

In this instance I simply want to target tables that have a thead tag.
I trying to concatenate or search using JavaScript or jQuery whichever is quicker.
e.g thead = DT[i].children('thead');
function go() {
var i = 0,
DT = document.getElementsByClassName('DT');
for (i; i < DT.length; ++i) {
var x = DT[i];
if ($(x + ' thead').length) {
//do stuff to this table
}
}
}
<table class="DT" id="gv1">
<tbody>
<tr>
<th>th</th>
</tr>
<tr>
<td>td</td>
</tr>
</tbody>
</table>
<table class="DT" id="gv2">
<thead>
<tr>
<th>thead</th>
</tr>
</thead>
<tbody>
<tr>
<td>td</td>
</tr>
</tbody>
</table>

You don't need any loops, you can use jQuery's :has() selector to retrieve an element based on whether or not it contains a specified child, like this:
function go() {
$('.DT').has('thead').addClass('foo');
}
go();
.foo { border: 1px solid #C00; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="DT" id="gv1">
<tbody>
<tr>
<th>th</th>
</tr>
<tr>
<td>td</td>
</tr>
</tbody>
</table>
<table class="DT" id="gv2">
<thead>
<tr>
<th>thead</th>
</tr>
</thead>
<tbody>
<tr>
<td>td</td>
</tr>
</tbody>
</table>

You can use querySelector to check if the nested thead exists.
if (x.querySelector("thead")) {
//do stuff to this table
}
Just so you know, you'd do this to accomplish what you were trying originally:
if ($(x).find("thead").length) {
//do stuff to this table
}
This is just to show how you can perform DOM selection from a given context.

Hide all buttons in HTML without using ID and Class using Pure Javascript

My HTML format looks like this :
<body>
<table>
<tbody>
<tr>
<td></td>
<td><span><input type="button"/></span></td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td></td>
<td><span><input type="button"/></span></td>
</tr>
</tbody>
</table>
</body>
I want to hide all buttons without using class and ID. I've tried everything to hide the buttons but its not working.
What I've tried is something like this :
document.getElementsByTagName('input').style.visibility = "hidden";
and
input_list = document.getElementsByTagName('input');
for (element in input_list) {
element.style.visibility = "hidden";
}

if you want to hide all buttons in your form use
$("input[type^=button]").each(function (index) {
$(this).hide();
});
UPDATE: may be this could help you
var ele = document.getElementsByTagName("input");
if (ele.length > 0) {
for (i = 0; i < ele.length; i++) {
if (ele[i].type == "button")
ele[i].style.display = "none";
}
}

I hope this will make u sense with javascript
var i =document.getElementsByTagName("input");
for( var n in i){
if(i[n].type = "button"){
alert("hide button "+n);
i[n].style.visibility = "hidden";
}
}
<body>
<table>
<tbody>
<tr>
<td></td>
<td><span><input type="button"/></span></td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td></td>
<td><span><input type="button"/></span></td>
</tr>
</tbody>
</table>
</body>

You can use jquery to hide all buttons
Just use
$('input').hide();
Check this fiddle -> https://fiddle.jshell.net/c8tqvy0r/

You can write in jquery
jQuery('input[type="button"]').hide();
or through css you can give
input[type="button"]{
display:none;
}
or
input[type="button"]{
opacity:0;
}

Instead of using
for (element in input_list)
use
for(var i=0; i < input_list.length; i++){
input_list[i].style.visibility = "hidden";
}

index of tr with tds only --- relative to click

How do I get the index of the <tr> in the table but only if it has <td>s and not <th>s
If I use a click event below it will alert the index of the with td and th but I only want <tr> with <td>s
thanks
$('td').click(function(){
var s = $(this).parents('table tr:has(td)').index();////// returns
alert(s);
});
<table>
<tr>
<th><th><th><th><th><th><th><th><th><th>
</tr>
<tr>
<td><td><td><td><td><td><td><td><td><td>
</tr>
<tr>
<td><td><td><td><td><td><td><td><td><td>
</tr>
<tr>
<td><td><td><td><td><td><td><td><td><td>
</tr>
<tr>
<td><td><td><td><td><td><td><td><td><td>
</tr>
</table>

Try this...
$('td').click(function(){
if ( ! $(this).closest('table').find('th').length ) {
var s = $(this).closest('tr').index();
alert(parseInt(s) + 1);
}
});​
JS FIDDLE LINK

Your given code is working properly. see this jsfiddle.

Categories

Resources