Hello guys i am having a problem i am creating a google chrome extension that can exctract some infromation from a website and saving them on a txt file.
The issue is that i want to exctract a innerhtml data close to a span ID this is the code i need to be able to exctract:
<tr class="gridRow_even">
<td class="fieldLabel_150">
Date
</td>
<td>
<span id="123"></span>
12/20
</td>
</tr>
What i want to save is 12/20 on the txt usually i do get element by ID but in this case i have no idea how to get it i tried also doing this using jquery this:
var DT = $("td:contains(/)")
But it gives me object object when i try to save as txt the data exctracted.I have no idea how to do this i am getting crazy please help!!!
const text = Array.prototype.filter.call(document.querySelectorAll('td'), el => el.querySelector('span#a123'))[0].innerText;
console.log(text);
<table>
<tr class="gridRow_even">
<td class="fieldLabel_150">Date</td>
<td>
<span id="a123"></span>
12/20
</td>
</tr>
</table>
Before the explanation, two quick notes about this example:
document.querySelector('td') doesn't appear to work unless it's in a proper table. It's likely your real example is in a <table>, so it's a moot point. If it's not, you'll need to come up with a slightly different method of finding it (which could be the topic of another answer).
123 is not a valid id. An id must begin with a letter. Again, your real target is probably named fine. If it really does start with a number, use el.querySelector('span[id=123]') instead.
As for the code, basically use document.querySelectorAll('td') to get all of the td elements (if they're in a specific table, use that as well, like '#tableId td').
Then, I used Array.prototype.filter() to filter all of the td elements, looking for any that contained the span we want to find. Had to use Array.prototype.filter.call() because the result of document.querySelectorAll() is actually a NodeList, which is array-like, but not an actual array.
Once I have filtered, I just get the first element from the filter and get it's innerText.
If there might be more than one td that has the span in a page, use .map(el => el.innerText) instead of [0].innerText to create an array of all of the values instead.
An alternative would also be to find all of the <span> elements, then loop through and get each of their parentNode elements. This would require though that the <span> is a direct child of the <td>, so may be less flexible depending on your real use case.
const text = Array.prototype.map.call(document.querySelectorAll('span#a123'), el => el.parentNode)[0].innerText;
console.log(text);
<table>
<tr class="gridRow_even">
<td class="fieldLabel_150">Date</td>
<td>
<span id="a123"></span>
12/20
</td>
</tr>
</table>
If you know for sure it'll only ever be one span, you can use this instead:
const text = document.querySelector('span#a123').parentNode.innerText;
console.log(text);
<table>
<tr class="gridRow_even">
<td class="fieldLabel_150">Date</td>
<td>
<span id="a123"></span>
12/20
</td>
</tr>
</table>
Javascript:
var desired_innerHTML = document.getElementById('123').parentElement.innerHTML;
jQuery
var desired_innerHTML = $('#123').parent().html();
12/20 is a text node. You can filter the result of .contents() by .nodeType.
var DT = $("td:contains(/)").contents().filter(function(idx, ele) {
return ele.nodeType == Node.TEXT_NODE && ele.textContent.trim().length != 0;
});
console.log('Txt: ' + DT.text().trim())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr class="gridRow_even">
<td class="fieldLabel_150">
Date
</td>
<td>
<span id="123"></span>
12/20
</td>
</tr>
<tr class="gridRow_even">
<td class="fieldLabel_150">
Date
</td>
<td>
<span id="xxx"></span>
</td>
</tr>
</tbody>
</table>
This is how you get the expected output
$("span#123").parent().text();
Simple Javascript
document.getElementById("123").parentNode.innerText;
Related
I am working for a update on a chrome extension for a page where I have the following table.
<tr class="MessageContent">
<td colspan=3>
data
</td>
</tr>
I am trying to change the second tables color.
I have access to the first table, but need to somehow select the second table.
document.getElementsByClassName("MessageContent")[0]; // First table
Nothinng I have tried has worked.
Use querySelector instead, to select the first <td> inside a <tr class="MessageContent">:
document.querySelector('tr.MessageContent > td').style.backgroundColor = 'yellow';
<table>
<tr class="MessageContent">
<td colspan=3>
data
</td>
</tr>
</table>
If you need to be more specific and are sure the td always has colspan=3, then
document.querySelector('tr.MessageContent > td[colspan="3"]');
This is my code:
<tbody>
{#participants}
<tr>
<td id="id">{.fullName}</td>
</tr>
{/participants}
I am writing this code in .dust file. I want to append row index value to my td's ID. Is there any way to do it? Thanks in advance!
Do you want the index from your database row? Then you might want to to something like:
<td id="id_{.id}">{.fullName}</td>
...where {.id} contains the value of the ID of the row. this would be the best method, as it required no javascript, this method is fastest.
{$idx} will give you the current index.
Example
<tr>
<td id="id_{$idx}">{.fullName}</td>
</tr>
having some issues with my code below, first here is the HTML:
<table class="finance-table">
<tbody><tr>
<th></th>
<th>Deposit</th>
<th>Balance</th>
<th>Fees</th>
<th>Total Payable</th>
<th>Term</th>
<th>Fixed Rate</th>
<th>Representative APR</th>
<th>Monthly Pmt</th>
</tr>
<tr class="hp">
<td><strong>HP</strong></td>
<td id="td_finance_deposit">£11700.00</td>
<td id="td_finance_balance">£105300.00</td>
<td id="td_finance_fees">£298.00</td>
<td id="td_finance_total_inc_deposit">£146255.50</td>
<td id="td_finance_term">60 mths</td>
<td id="td_finance_rate">5.50%</td>
<td id="td_finance_apr">10.1%</td>
<td id="td_finance_monthly_payments">£2242.59 p/m* x 60 mths</td>
</tr>
</tbody></table>
There is about 10 of these tables [within the same document], all with the same id's and class's. I'm using an each loop to execute some code against each table found, however it only seems to be working on the first table and disregards the others.
Below is the jQuery, like I said works find on the first table, but ignores the rest!
<!-- Remove First and Final Payment from Showroom Finance Examples -->
<script>
$(".finance-table").each(function(key, value) {
// Display loading
var html = $(this);
// Remove the First Payment and Final Payment Column
$(this).find("#td_finance_first_payment, #td_finance_final_payment").remove();
$(this).find("th:contains('1st Pmt')").remove(); $(this).find("th:contains('Final Pmt')").remove();
// Get the Term and update the monthly payment
var term = $(this).find("#td_finance_term").html(); // .replace(/\D/g,'')
var payments = ($(this).find("#td_finance_monthly_payments").html()).split('x')[0];
($(this).find("#td_finance_monthly_payments")).html(payments + " x " + term);
})
</script>
Edit:
Please note, I can't change the HTML at all
You should first give a unique ID to each <td>, perhaps with your DB identifier for that record. You don't need it now but this will allow you to do other thing later if you need it.
Then change all the <td> ids to classes:
<td class="td_finance_fees">£298.00</td>
Finally change all your javascript accordingly to use class instead of IDs:
$(this).find(".td_finance_first_payment, .td_finance_final_payment").remove();
Using Attribute Equals Selector
Change your code from:
$(this).find("#td_finance_first_payment, #td_finance_final_payment").remove();
to:
$(this).find('td[id="td_finance_first_payment"], td[id="td_finance_final_payment"]').remove();
Do this type of change for all areas of #xxx to id="xxx"
What this does is find all tds with attribute id="xxx", rather than using #id identifier, this is forces jQuery to do a tree search.
Also your HTML does not match your code, (theres no td_finance_first_payment in your html, I assume you removed it?)
Edit: This solution is useful if you 100% cannot edit the html (comes from a source you have no control over, such as an API or internal software). Best solution would be to fix the ids!
Given,
<table id=ThisTable>
<tbody>
<tr>
<td id="ThisCell">
</td>
</tr>
<tr>
<td id="NotThis">
</td>
</tr>
<tr>
<td id="NorThis">
</td>
</tr>
</tbody>
</table
How can I use JQuery/Javascript to assign the ID of the first table cell in #ThisTable to the variable "Selected"?
The result in this case should look like:
var Selected = "ThisCell";
I need to get the first cell's ID without having any knowledge of what the ID is, probably using the :first selector. In addition, this isn't the only table on the page, so it must be referenced with its ID.
var Selected = $('#ThisTable td:first').attr('id');
This selects the first td element that is a descendant of the element with ID ThisTable, returns its id attribute and assigns it to Selected.
JSFiddle
Just:
$("#ThisTable tbody tr:first td:first").attr("id");
This code gets the first td of your table, then stores its id in a variable Selected.
var Selected = document.querySelector("#ThisTable td").id;
Pure DOM methods, fastest method here, and works on 91.71% of browsers according to Can I use.
$(function () {
console.log($($('#ThisTable').find('td')[0]).attr('id'))
});
http://jsfiddle.net/E9mPw/17/
I have the div structure shown below. For the second <td> in the table i want to replace with a hyperlink whose href attribute is stored in the variable myLink.
How can i do this with jquery ?
Please help.
Thank You.
<div class="pbHeader">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="pbTitle">
<h2 class="mainTitle">Transfer Membership</h2>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
You can do something like this:
// you said this was already set
var myLink = 'http://stackoverflow.com/questions/2761234';
var $a = $('<a>').attr('href',myLink).text('My Link!');
$('.pbHeader td:eq(1)').empty().append($a);
This uses the :eq() selector to grab the second TD underneath a .pbHeader (:eq is zero based, so 0 is the first element, 1 is the second element). It empties your and appends the generated <a> tag inside of it.
You could also do this:
$('.pbHeader td:eq(1)').html('My Text!');
Which sets the innerHTML of that <td> to be your "link"
jsbin preview