Get source from a <tr> element with Jquery [duplicate] - javascript

This question already has answers here:
Get selected element's outer HTML
(30 answers)
Closed 4 years ago.
I'm trying to get the source of a tr element using JQuery.
For this I'm using the selector below :
$('#mygrid > table tr')
On console I can see this selector returns me this :
<tr class="red-background">
<td class="date">10/07/2018</td>
<td class="hora">13:09</td>
</tr>
The return is actually an object, not a string :
typeof $('#grid-historicos > table tr')
"object"
So I can't use the method .html()
So what is the right way to get the HTML source of the element? I need only this part as a string :
<tr class="red-background">

Working fiddle.
You need to select the tr line you want to target using the index [0] in my example, then select the outerHTML and split the result then finally get the first line :
console.log($('#mygrid > table tr')[0].outerHTML.split('\n')[0]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mygrid">
<table style="width:100%">
<tr class="red-background">
<td class="date">10/07/2018</td>
<td class="hora">13:09</td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</div>

Related

How to create an html table with data that can change using JS

I'm trying to create an online calculator, using a table, with a tag that will have an output that changes. The output is the result of whatever math function is used on the calculator. So if someone puts in 5*5, the th should show 25. I tried using a variable, output, in javascript, and then using document.getElementsByTagName("th").innerHTML(output), to have it changing, but that didn't work. Then I tried the same command without a variable, and instead just directly inserting a string in the innerHTML and it still wasn't working. I also tried write(), but that didn't work either. Any ideas on what I can try?
This is my table (the id's and classes are just some style attributes in my css file):
<table class="center" style = "width:20%">
<tr>
<th colspan="4" id = "final">0</th>
</tr>
<tr id = "opRow">
<td>+</td>
<td>-</td>
<td>x</td>
<td>/</td>
</tr>
<tr class = "dataRow">
<td>7</td>
<td>8</td>
<td>9</td>
<td rowspan = "4" id = "eqBut">=</td>
</tr>
<tr class = "dataRow">
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr class = "dataRow">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr class = "dataRow">
<td style = "width:26%" id = "acBut">ac</td>
<td>0</td>
<td>.</td>
</tr>
</table>
getElementsByTagName() returns an array and so you'll have to reference it like this:
document.getElementsByTagName("th")[0]
assuming that you only have 1 th tag on your current page.
plus innerHTML is a property of an element and not a method, so you'll have to rewrite:
document.getElementsByTagName("th")[0].innerHTML = output
Also, your current implementation should be throwing some errors in your browser console log please do check it out.
Method / function
getElementsByTagName
is returning an array with all available tags from your html, then you've only 1 th in your table so is result the th tag from your table is first [0], now use method mention to select th tag and select first element [0]
innerHTML - used to rewrite data as I know
and use it to rewrite cell.
So use that :
document.getElementsByTagName("th")[0].innerHTML = 52;
To check if is working try this :
document.addEventListener("DOMContentLoaded", function(){
document.getElementsByTagName("th")[0].innerHTML = 52;
});
Well, I hope that you understand what I want to say. Thanks.

Get text without certain element included using JQuery [duplicate]

This question already has answers here:
Using .text() to retrieve only text not nested in child tags
(30 answers)
Closed 1 year ago.
So I have this table below. And I want to get the text inside td.am-receipt-price but without getting the span text included.
<table>
<tbody>
<tr>
<td class="am-receipt-price">
<span class="am-receipt-discounted-price"><del>price 1</del></span>
price 2
</td>
</tr>
</tbody>
</table>
console.log ( $(".am-receipt-price").text() ) would also return the text inside the span. I have tried .remove("span") but it wont work.
Am I missing any selector that I have not tried yet? thanks in advance.
The simplest solution would be to add another element around the target node and use a selector to retrieve it.
Assuming you cannot amend the HTML, then you can use contents() and filter() on the parent td to target the node and read its textContent.
let $td = $('.am-receipt-price');
let nodes = $td.contents().filter((i, n) => n.nodeType === Node.TEXT_NODE && n.textContent.trim() !== '');
console.log(nodes[0].textContent.trim());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td class="am-receipt-price">
<span class="am-receipt-discounted-price">
<del>price 1</del>
</span>
price 2
</td>
</tr>
</tbody>
</table>
An alternative to the already provided .contents() solution (if you need/want an alternative) is to use .clone() and .remove(), where you copy the html into a variable then you can do what you want with it without changing the original.
var price = $("td.am-receipt-price").clone();
price.find("span").remove();
console.log(price.text().trim())
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td class="am-receipt-price">
<span class="am-receipt-discounted-price">
<del>price 1</del>
</span>
price 2
</td>
</tr>
</tbody>
</table>
It may be that your .remove("span") just had the wrong syntax:
$("td.am-receipt-price").find("span").remove()
would change the original DOM nodes.

Finding a certain number in html and replace it with custom text

So, I have a table and there is a colum called value with different numbers that varies from 0 to 2.
<column>Values<column>
<td>0</td>
<td>2</td>
<td>0</td>
Yes, I know that something like does not exist, it was just for sake of example.
But the real question is, how can I with help of jquery find those numbers and replace it with something else.. for example
if(td == 1){
replace 1 with "Hello"
}
Use contains() to get td which have similar text and replace text using .text()
$("td:contains('1')").text("hello");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
Well, it depends...
If you are refering to ALL the content of the cell as a numeric value, you can do this (in JS)
if(Number($(td).html().trim()) == number_to_replace){
$(td).html(text_for_replacement);
}
where "td" could referer to the cell as a DOM variable or could be a string selector
Can you give your elements Id's? This may make your code more readable and maintainable, and will remove the dependency between the value you are trying to replace and the code that is looking for it.
If you can use Id's, then you can use jQuery selectors to get hold of the element and then, depending on the element type, set the text or innerHtml to your required values.
Foe example;
$( document ).ready(function() {
$('#col1').text('hello');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td id="col1">1</td>
<td id="col2">2</td>
<td id="col3">3</td>
</tr>
</table>
or JsFiddle.net
Use :contains() pseudo-class to select all td which contains 1 and then use text() with callback to check content is exactly 1 and update.
$('td:contains(1)').text(function(i, v) {
return $.trim(v) == '1' ? 'hello' : v;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>11</td>
</tr>
</table>

How can I pass a row as parameter to javascript? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I want to get information of a row to show in a tooltip. For example:
<html>
<table style="width:100%">
<tr>
<td>Jill</td>
<td onmouseover="loadtooltip(parameter)">Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td onmouseover="loadtooltip(parameter)">Jackson</td>
<td>94</td>
</tr>
</table>
<html>
So, when I pass the mouse over the row I need the content of the others columns.
Thx in advance.
You can use parentNode variable as:
<td onmouseover="loadtooltip(this.parentNode)">Smith</td>
You tagged your question with jQuery, so I'm assuming a jQuery solution is acceptable. First, don't inline your event handlers, it's bad form. Instead hook up your event handlers using .on. I added a class to make identifying the td you want to attach the roll over to a little easier. Then in the handler, this will refer to the element that recieved the event and you can use $(this).parent() to get it's parent tr.
$("td.rollable").on("mouseover", function(e) {
var row = $(this).parent();
alert(row[0]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<table style="width:100%">
<tr>
<td>Jill</td>
<td class="rollable">Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td class="rollable">Jackson</td>
<td>94</td>
</tr>
</table>
<html>
Edit: since your comment suggests you actually need the siblings and not the row itself
$("td.rollable").on("mouseover", function(e) {
var siblings = $(this).siblings();
var text = siblings.map(function(i, item) { return item.innerHTML; });
alert($.makeArray(text).join(", "));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<table style="width:100%">
<tr>
<td>Jill</td>
<td class="rollable">Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td class="rollable">Jackson</td>
<td>94</td>
</tr>
</table>
<html>
$("#table").find("tr").eq(0)
To get the row at index 0. Then you can loop through td elements.

Hide table row if one of its columns is empty using CSS [duplicate]

This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
hide row if it contains empty columns
Can the row containing empty cell in this table be hidden using CSS.. I have tried jQuery and its not working right now..
this is what I used and it doesn't do anything!
$('.EventDetail tr').each(function(){
if ($('td:empty',this).length > 0))
$(this).hide();
});
There ain't nothing wrong with this piece of jQuery, is there? I would like to see if we can do display:none for the selected row? Is it something achievable using CSS?
<table cellpadding="10" class ="EventDetail">
<tr>
<td class="TableFields"><em>Who Should Enroll?:</em></td>
<td>Everyone 18 and older who would like to attend</td>
</tr>
<tr>
<td class="TableFields"><em>Handicapped Access:</em></td>
<td>Yes</td>
</tr>
<tr>
<td class="TableFields"><em>Parking Notes:</em></td>
<td></td>
</tr>
<tr>
<td class="TableFields"><em>Instructor:</em></td>
<td>John Filler</td>
</tr>
</table>
This selector should do it...
$('.EventDetail tr:has(td:empty)').hide();
jsFiddle.
The :empty selector looks for elements with no child nodes. If it is possible you may have whitespace there, but you still consider it empty, try something such as...
$('.EventDetail tr').filter(function() {
return $(this).find('td').filter(function() {
return ! $.trim($(this).text());
}).length;
}).hide();
jsFiddle.

Categories

Resources