how to insert <a> in <td> - javascript

I am creating <td> and adding data to it.
$("<td>").addClass("tableCell1").text(mydata).appendTo(trow);
now if I have to create an <a> tag inside how to do it?
example:
<td headers="xx">
<a href="#" title="zz</a>
</td>
EDIT:
$("<td>").addClass("tableCell1").text(mydata).appendTo(trow);
is working fine but
$('a').attr({ href: '#', title: 'title here' }).appendTo($('td')).appendTo(trow);
is not working, I am not getting the <a> under <td>

I would do something like this:
$("td.tableCell1").append('');
EDIT: Or for even more safety in selecting the proper <td>, you should be able to use
$("td.tableCell1", trow).append('');
For even EVEN more safety, you could
$("td.tableCell1:lastChild", trow).append('');

I am assuming that you're trying to create the <a> and the <td> at the same time. If you're trying to add the <a> at a different event, you would need a different solution.
$("<td/>",{"class":"tableCell1", text:mydata})
.append($("<a/>",{ href:"#", title:"zz"}))
.appendTo(trow);
Note that you didn't indicate any content for the <a> in your question. If not styled properly, it will be invisible. If you want to add some text, add text: "some text" to the <a> creation.

Related

Selenium get element from menu without ID

I am working with Selenium Web driver and need to reference am item in a javascript menu that has no id. I need to know how I can get the following web element in Selenium. I am not very proficient with javascript or HTML so any help is needed.
<td class="menu" colspan="2">
<a href="javascript:Redirect('marks',0);" class="menu">
Display Text Here
</a>
</td>
To get the element with text as Display Text Here you can use either of the following Locator Strategies:
LinkText:
"Display Text Here"
CssSelector:
"td.menu>a.menu"
XPath:
"//td[#class='menu']/a[#class='menu'][contains(.,'Display Text Here')]"
You can locate this element by xPath:
//a[contains(., 'Display Text Here')]
so in JavaScript it will be like this:
driver.findElement(By.xpath("//a[contains(., 'Display Text Here')]")).click();
Here you will find more information.
You can use this linkText :
Note that you should always choose linkText when compared to xpath and cssSelector.
driver.findElement(By.linkText("Display Text Here")).click();

AngularJS: Creating a class that I can use in my app.js file to use hyperlink pictures

In my app.js file I have classes that are data driven, such as text and picture classes. I have a hyperlink class for which I used Href that looks like this:
div class = "links" ng-if="field.fieldLink">
<a ng-if="content.LinkField.fieldLinkNewTab !== false" target="_blank"
ng-href="{{ content.fieldLink.fieldLinkHref }}">{{
content.fieldLink.fieldLinkText }}</a>
<a ng-if="content.fieldLink.fieldLinkNewTab === false" ng-href="{{
content.fieldLink.fieldLinkHref }}">{{
content.fieldLink.fieldLinkText }} </a>
</div>
So this way I can easily use it like this in my .JS file:
fieldLink
{
fieldLinkHref: "www.etc.com",
fieldLinkText: "click here for random website",
The problem that I am having is making a field for an image:
fieldLinkImage: "documents/pictures/etc.jpg"
fieldLinkHref: "www.etc.com",
Clicking the picture should redirect me to the url.
I can do this in my .html file just fine, by simply wrapping the image in the class, but I want to select the image in my .JS file.
How do I make this happen without hard coding the links and images in the .html file ?
Thank you!
Sorry about this but I will criticize your code a bit.
First to point out that you have a typo, LinkField should probably be fieldLink in your first <a> element.
Next, why are you comparing !== false when you can just check if var is true or truthy (just put variable in condition - no need to compare with anything - if it's there or is true it will be truthy).
Also to create a new element just because you need to have different attribute is bad, you will get tons of code and get lost at some point. Instead use ng-attr-target which will give you same thing in one line - puts target (or any other) attribute based on condition.
But all of that can be fixed of course, I will take a wild guesses on your data structure during this since you haven't provided jsfiddle or similar. I guess that you have a list of objects that hold images or links and you want to put them together in some ng-repeat based on the type either show link or image.
So this would be your data object:
let contentObj = [{
fieldLink: {
fieldLinkNewTab: false,
fieldLinkHref: "www.etc.com",
fieldLinkText: "click here for random website",
}
}, {
fieldLink: {
fieldLinkNewTab: true,
fieldLinkHref: "www.etc.com",
fieldLinkImage: "https://images.pexels.com/photos/590490/pexels-photo-590490.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb",
}
}];
and this would be your html, if fieldLinkText is there it will show text, if fieldLinkImage is there it will show image, keep in mind if you have both it will show both, also by utilizing power of ng-attr-target you show one element in html and not two with ng-if:
<div class="links" ng-repeat="content in contentObj" ng-if="content.fieldLink">
<a ng-attr-target="{{(content.fieldLink.fieldLinkNewTab) ? '_blank' : undefined}}" ng-href="{{ content.fieldLink.fieldLinkHref }}">
<span ng-if="content.fieldLink.fieldLinkText">{{ content.fieldLink.fieldLinkText }}</span>
<img class="image-class" ng-if="content.fieldLink.fieldLinkImage" src="{{content.fieldLink.fieldLinkImage}}" alt="" />
</a>
</div>
I hope this is helpful, I didn't mean to be too critic, if I was sorry about that, but these things will help you in future. And here's the fiddle that you can play on change your data tweak it up a bit: https://jsfiddle.net/pegla/j392Lvdp/3/

jQuery script for image change, not working

I want to change src of in img, I coded as below, but it's not working, what's wrong?
<img id='logo_image'/>
<span onclick='$(logo_image).attr("src", "images/logo_orange.png");'>click me</span>
It might be the problem with your selector.
If it is id use $('#logo_image')
If it is class use $('.logo_image')
First up you're trying to use a variable logo_image when you should be using a string starting with # to indicate you want to select by id:
onclick='$("#logo_image").attr("src", "images/logo_orange.png");'
Secondly, it would be better not to use an inline onclick attribute if you can help it:
<img id='logo_image'/>
<span>click me</span>
<script>
$("span").click(function() {
$("#logo_image").attr("src", "images/logo_orange.png");
});
</script>
...where ideally the span element would have some id or something to select it by.
Thirdly, don't make span elements clickable in the first place unless you don't care about making your page accessible to people who can't (or who choose not to) use a mouse or other pointing device. Better to use an anchor (which you can style as you see fit) so that the user can tab to it and activate it with the keyboard:
<img id='logo_image'/>
click me
<script>
$("a").click(function(e) {
e.preventDefault();
$("#logo_image").attr("src", "images/logo_orange.png");
});
</script>
The problem with your code is you aren't probably setting the object to logo_image variable.
I suggest changing it to:
<span onclick='$("#logo_image").attr("src", "images/logo_orange.png");'>click me</span>
logo-_image should be the id of that image.
Since you want refer to the name of the id, you have to wrap the logo_image in quotes, otherwise Javascript will treat it as variable.
$('#logo_image')
You have to use something like this:
<img id="logo_image" src="" />
<span onclick='$("#logo_image").attr("src", "images/logo_orange.png");'>
click me
</span>
if you have an img with a id named logo_image
if your img has the css class logo_image you have to write:
<img class="logo_image" src="" />
<span onclick='$(".logo_image").attr("src", "images/logo_orange.png");'>
click me
</span>
Make sure u use the right quotes in the javascript part.
Also use $('#logo_image') selector to get the image by id.
I made a jsfiddle for you to demonstrate:
http://jsfiddle.net/9Ltfa/
<span onclick="$('#logo_image').attr('src', 'images/logo_orange.png');">click me</span>
As you have specified the image as an id, you will need to reference the image via the following code:
$('#logo_image')

Find parent() of control, then find("a") JQuery

I have a <td> that looks something like this:
<td class="myTDClass">
<span class="spanClass">Header</span>
<br />
<img class='myImages' style='cursor: hand;' onclick='doSomething(control)' alt='this is my alt Text'></img>
<br />
<span style="color: #123456;">More Text</span>
<br />
<a class='findThisClass'>Insert Alt Text Here</a>
</td>
This calls some jQuery code that sets the alt tag to some new text. Then, i want it to set the <a> element to some new text. Here is the jQuery code:
doSomething = function(control)
{
var $myControl = $(control);
$myControl.attr("alt", "This is the new Alt Text!");
var $newControl = $(control).parent().siblings().find(".findThisClass").first();
alert($newControl.find("a").text());
});
The jQuery code sets the alt tag great, but doesn't find the <a class=findThisClass />.
I think I'm using the .parent() and .siblings() wrong. Can anyone find my error? The idea here is that I can search just inside the <td> for the <a> element, and not touch the other elements in other <td>s
Try this instead:
var $newControl = $(control).closest('.myTDClass').find(".findThisClass");
alert($newControl.text());
Also img is self closing tag, instead of:
<img></img>
Just use:
<img... />
And instead of:
onclick='doSomething(control)'
Use:
onclick='doSomething(this)'
so that jQuery has really a control to work with :)
Working Example
Assuming you want to find the <a> that's in the same table cell as your <img>, you don't need to use parent(). All you need to do is call .siblings Try:
var $newControl = $(control).siblings('a.findThisClass').first();
This assumes control points to the image within the table cell.
$("a.findThisClass", $myControl).first()
a is a sibling of the image, so, simply:
$(control).siblings(".findThisClass")

select a different element other than the one clicked

How do I select an element with jquery, when a different element is clicked, when you don't know the name of the element? The code below is looping over the all the categories. I don't know how many categories there are, or what the names will be. When the 'insertUrl' link is clicked, I need to select the text area.
The only thing I can thinking is running an function in onclick and passing the name of the text area as a parameter.
Also, I'm not sure that I can use a selector when every link has the same id, so is this even possible?
<%
FullName = objCategory.ID & "|" & objCategory.Name
%>
<TD COLSPAN="2">
<TEXTAREA ROWS="5" CLASS="formWide" id="<%=FullName %>"><%= objCategory.Text %></TEXTAREA><br />
Insert URL
</TD>
If the HTML structure stays the same you can use .prev()
You shouldn't have elements with the same ID. You can use classes class="insertUrl"
<%
FullName = objCategory.ID & "|" & objCategory.Name
%>
<TD COLSPAN="2">
<TEXTAREA ROWS="5" CLASS="formWide" id="<%=FullName %>"><%= objCategory.Text %></TEXTAREA><br />
Insert URL
</TD>
and
$(".insertUrl").click(function() {
var textarea = $(this).siblings('textarea');
});
maybe its better if you use:
$(this).siblings('textarea');
this way you have more flexibility with the html controls order.
this way, if you remove the or change something else inside that TD the script will still works.
An even better way would be to use the <label> element. This way, you can insert later additional elements between the text comment and the textarea, and it still will work.
<textarea id="ta_id1" onclick="click_processing_func"></textarea>
<label for="ta_id1" class="link">Insert Url</label>
Now, if anyone clicks on the label, textarea will receive the click event.

Categories