I have a HTML structure like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<table id ="x">
<tr>
<td class='col1'>
Hello <span class='name'></span> How are u ?
<td>
</tr>
</table>
And here is my jQuery code:
var variable = $('table#x').find(".col1").html().find("span.name").append(' Jack..!').replace('u', 'you');
alert(variable);
Now, I want this output:
<td class='col1'>Hello <span class='name'>Jack..!</span> How are you ?<td>
How can I do that?
You already have a class you can target, 'name'. You can simply add the text to this:
$('.name').text('Jack..!')
https://jsfiddle.net/2j7rxwyj/
Based on my comment, you could use the following:
Updated Example
$('table#x .col1 span.name').append(' Jack..!').parent().text(function () {
return $(this).text().replace('u', 'you');
});
There were a couple issues in your code. For one, you can't chain .append() after the .html() method. In addition, the .replace() method wasn't changing the text. To fix this, you could pass an anonymous function to the .text() method and return the replaced text.
Related
I am new to angularjs and I am creating a function. And the function has a parameter like this {{sched.an_id}}. But it doesn't work. Here's my code:
$scope.sample = function(val){
alert(val);
};
HTML
<table>
<tr ng-repeat='sched in schedule'>
<td>
<a ng-click="sample({{sched.an_id}})"></a>
</td>
</tr>
</table>
In the html above, it doesnt alert the value of the sample(). I tried to inspect the element and it gives me the exact value sample(23). I tried to remove the {{sched.an_id}} and replace sample(123) it works. What should I do?
This is because you are using {{}} inside ng-click
Try this
<a ng-click="sample(sched.an_id)"></a>
I'm trying to get the headers value from the object when I click on its link.
For the example I'm trying to get the value "2014_BUDGET" when I click on the link.
I've tried all sorts of variations.
Tried getting .prop() instead of .attr.
Tried searching .closest('td')
Tried getting the parent attr.
All end with an alert with 'undefined'.
Here is my code
<td headers="2014_BUDGET" class="MYCLASS">1</td>
<td headers="2014_BUDGET" class="MYCLASS">1</td>
In href this points to the global window object.
Use onclick instead.
<td headers="2014_BUDGET" class="MYCLASS"><a href="#"
onclick="alert(this.parentNode.getAttribute('headers')); return false">1</a></td>
$(document).ready(function(){
$("a.anchor").on("click", function(e) {
e.preventDefault();
alert($(this).closest("td").attr("headers"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td headers="2014_BUDGET" class="MYCLASS">1</td>
<td headers="2015_BUDGET" class="MYCLASS">2</td>
</tr>
</table>
Try this;
<td headers="2014_BUDGET" class="MYCLASS">1</td>
It's essentially the same answer as Gurvinder372, however, that answer targets the A tag, rather than the TD tag.
1
Edit
Never mind, he has updated his answer. Ignore this one.
Trying to copy content of table into a div, and can't make it work...
Here is sample code of the table and div
<table><tr>
<td class="movr">See this content</td>
</tr></table>
<div class="sample"></div>
and here is jquery code
$(document).ready(function(){
var move = $(".movr").html;
$(".sample").html(move);
});
Can't find the mistake..
html is method and not property. Use .html() instead of .html:
var move = $(".movr").html();
$(".movr") returns an array NOT an object, mate.
I am trying to add some data in the following table structure :
<table>
<tr id = "line_one">
<!-- datas here -->
</tr>
<tr id = "line_two">
<!-- or data here -->
</tr>
</table>
I already tried in JQuery the following call to .appendTo() :
<script type = "text/javascript">
$(document).ready(function() {
$("#line_one").appendTo("<td>test</td>");
}
</script>
Does anyone has a clue of what happened wrong on this short code ?
Use .append() in your case and not .appendTo() .
.appendTo() will append tr to td
$("#line_one").append("<td>test</td>");
Also
$(document).ready(function(){
………
});
Closing paranthesis missing.
You want to use append, not appendTo.
As is it, you're appending #line_one to a newly created DOM object <td>test</td> and just keeping it in memory.
Try to use append instead of appendTo
<script type = "text/javascript">
$(document).ready(function() {
$("#line_one").html("<td>test</td>");
}
</script>
I am working on visualforce pages. below is given the part of HTML file code that has been generated after executing the apex code.
<table class="detailList" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr></tr>
<tr>
<td class="labelCol"></td>
<td class="dataCol col02"> userName </td>
<td class="labelCol"></td> <td class="dataCol"></td>
</tr>
<tr>
<td class="labelCol"></td>
<td class="dataCol col02"></td>
<td class="labelCol"></td>
<td class="dataCol"></td>
</tr>
</table>
I want to remove the userName anchor tag from this page which is coded in line# 6 whose class Name is "dataCol col02", and there is another anchor tag with the same class name "dataCol col02" at line# 11. keep it in mind that this html is generated by executing an APEX code. Kindly guide me how could i remove the anchor tag at line#6 only..
You can use find, first and remove methods.
$('.dataCol.col02').first().find('a').remove();
In case that you want to remove the userName textNode:
$('.dataCol.col02').first().contents().filter(function () {
return this.nodeType === 3;
}).remove();
Removing all the contents:
$('.dataCol.col02').first().empty();
Use this
$(function(){
$(".dataCol.col02:first a").remove();
});
Demo
You could do something like:
var anchor = document.getElementsByClassName("col02")[0] //select first matching 'col02'
.getElementsByTagName("a")[0] //select first matching <a>
anchor.parentNode.remove(anchor)
You can see it running here: jsfiddle
This assumes of course you only ever want to remove from the first instance of something with class='col02', so is not hugely robust. I imagine the fact it's generated means you can't put in more helpful class/id attributes?
On the flipside unlike the other answers it doesn't depend on jquery : )
Try this -
$('td.dataCol.col02').eq(0).find('a').remove();
or if you would like to empty that td -
$('td.dataCol.col02').eq(0).empty();
$("table .dataCol.col02:first a").remove();
Try this:
$("tr:eq(1) > td:eq(1)").remove()
Do this >>
$(".col02:first > a").remove();
Example Fiddle