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
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"]');
I want to assign a hidden td value to a id javascript variable. I used id = $(e.target).closest('tr').find('.orderid').val() line to do this. but it not works. Please help me to solve this.
<tr>
<td class="orderid" style="display:none;" value="{{this.id}}"/>{{this.id}}</td>
</tr>
On this line value attribute is not valid for a td element :
<td class="orderid" style="display:none;" value="{{this.id}}"/>{{this.id}}</td>
Should use this (if i understand correctly) :
<td class="orderid" style="display:none;" id="{{this.id}}"/>{{this.id}}</td>
Then if you need to retrieve this id :
id = $(e.target).closest('tr').find('.orderid').attr('id');
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;
<tr>
<td colspan="2" nowrap="" class="formDatanobrdr">
Click here
</td>
</tr>
They Are Not Click By Using the Below Code Please Tell how can i click the link
document.getElementsByName('formDatanobrdr')[0].click();
getElementsByName searches for elements with a specific name= attribute, which your html does not contain.
Instead search by class to access the td tag:
var td = document.getElementsByClassName("formDatanobrdr")[0];
//then select the a tag. its the only child element:
var link = td.children[0];
//click it
link.click()
you should use getElementsByClassName it get all elements with the specified class name, also you need to click the a tag not the table row tag so add new class to a tag
<tr><td colspan="2" nowrap="" class="formDatanobrdr">
<a class="formDatanobrdr1" href="https://wapking.net" onclick="redirectToHandler();">Click here</a></td></tr>
<script>document.getElementsByClassName('formDatanobrdr1')[0].click();</script>
querySelector can select one Element (the first in DOM corresponding to query)
So I give you the better unique query with your info
document.querySelector('tr > td.formDatanobrdr > a[href="https://wapking.net"]').click();
<tr>
<td colspan="2" nowrap="" class="formDatanobrdr">
Click here
</td>
</tr>
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/