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
Related
My html code is-
<tr class="selected">
<td id="participantID">XXXXX1234</td>
<input type="hidden" value="000001234" id="taxID">
<td id="fullName">Y, X</td>
</tr>
Here, I want to get hidden field value. I can not use ID of hidden field to get its value because there are multiple rows which can contain hidden field with same ID as "taxID". I want to get this value using <tr> class name.
i.e. selected.
I am using below code to get its value but it is giving me 'undefined' value.
var x = document.getElementsByClassName("selected")[0];
var y = x.getElementsByTagName("input")[0];
alert(y.value);
Alert statement shows undefined value. Am I missing something over here?
First, you cannot have multiple elements in a document with identical id values. That will have to be altered and that alone may solve your problem.
Second, your HTML is invalid. The input must be inside of a td.
Next, there is no reason to use getElementsByClassName() or getElementsByTagName() when you are looking for just one element - it's wasteful because you wind up searching the entire document when you are only interested in one item.
Also, both of those methods return "live" node lists which require re-scanning the entire document every time their results are referenced. The use cases for that are limited.
Instead use .querySelector() when you want to find just one item based on any valid CSS selector and .querySelectorAll() when you want to find a set of matching elements.
Assuming these things are corrected, you can do this:
var x = document.querySelector(".selected td input[type=hidden]");
alert(x.value);
<table>
<tr class="selected">
<td id="participantID">XXXXX1234
<input type="hidden" value="000001234" id="taxID">
</td>
<td id="fullName">Y, X</td>
</tr>
</table>
You need to have a table be the parent of a tr, then the DOM lookup will properly work. Also as noted by #Rory McCrossan you will want to wrap td tag around your input element:
var x = document.getElementsByClassName("selected")[0];
var y = x.getElementsByTagName("input")[0];
alert(y.value);
<table>
<tr class="selected">
<td id="participantID">XXXXX1234</td>
<td><input type="hidden" value="000001234" id="taxID" /></td>
<td id="fullName">Y, X</td>
</tr>
</table>
(Posted solution on behalf of the OP).
After removing ID of hidden field, it is working fine. Edited code is:
<tr class="selected">
<td id="participantID">XXXXX1234</td>
<input type="hidden" value="000001234" id="taxID">
<td id="fullName">Y, X</td>
</tr>
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.
Looking for some help on how to capture value for a specific TD cell. The challenge i'm faced with is that I cannot modify the TD cell to include classes or modify them as the table content are created dynamically by another system.
I created the fiddle below to give you an idea of what the structure of the table. As i explained above since I cannot directly modify the table structure or add extra classes to make it easier to target the TD cell I want, I am trying to Macgyver my way out of this one.
What I am trying to accomplish is this:
1) Need to capture the Reference number (Always 11 characters long and only contains numbers).
2) Put the captured reference number into a variable.
3) Concatenate the variable to the following url http://test.com/UpdateNotification.asp?OEN= (variable here) &CL=ALL&SU=ALL
4) Replace the Reference number with the URL.
So I am really having problems with the step 1 of this process. I would appreciate some help on this.
http://jsfiddle.net/W4Km8/5665/
<DIV class="sm_content">
<table border="1" width="100%">
<tr>
<td class="ms-vb2">reference numbers</td>
<td class="ms-vb2">name</td>
<td class="ms-vb2">Description</td>
<td class="ms-vb2">Incident</td>
</tr>
<tr>
<td class="ms-vb2">20150715110</td>
<td class="ms-vb2">Jhonson Doe</td>
<td class="ms-vb2">Box of cereal and other stuff</td>
<td class="ms-vb2">123</td>
</tr>
<tr>
<td class="ms-vb2">20150715111</td>
<td class="ms-vb2">Bobby Boucher</td>
<td class="ms-vb2">Box of nails and stuff</td>
<td class="ms-vb2">124</td>
</tr>
</table>
</DIV>
In the future, please make an effort before asking. That said, coders gotta code.
$('.sm_content table tr:gt(0)').each(function() {
var myId = $(this).find('td').eq(0).text();
var myUrl = 'http://test.com/UpdateNotification.asp?OEN=' + myId;
$(this).find('td').eq(0).html('' + myId + '');
});
Fiddle demo
Or, if you didn't actually want the ID linked, just do this for the last line:
$(this).find('td').eq(0).text(myUrl);
You have different ways to do it.
(function($){
$('.sm_content tr').slice(1).each(function(){
var td = $(this).find('td').first();
var tdContent = td.html();
td.html('' + tdContent + '');
});
})(jQuery);
Load the entire page into a string. I've used phpfilegetcontents but for an html only page I'd manually copy and paste the page into a text box and use document.getElementbyid('box').innerHTML to load the page's contents into a string
Find the first cell: entirepage.indexOf('td')
entirepage.slice(start from location of td plus enough characters to get past the rest of the tag, end 11 characters later)
that's your reference number
find the nth instance of 'td'
and so on.
no jquery necessary
Using jQuery I want to add some HTML to a specific <td> whose attribute matches the value I have.
For example I have a value '2015-02-01', I want to find/search the <td> which had the attribute 'data-date="2015-02-01"' and append HTML to the matched value, which in this example is <td>1</td>
<div class="fc-content-skeleton">
<table>
<thead>
<tr>
<td data-date="2015-02-01" class="fc-day-number">1</td>
<td data-date="2015-02-02" class="fc-day-number">2</td>
<td data-date="2015-02-03" class="fc-day-number">3</td>
<td data-date="2015-02-04" class="fc-day-number">4</td>
<td data-date="2015-02-05" class="fc-day-number">5</td>
<td data-date="2015-02-06" class="fc-day-number">6</td>
<td data-date="2015-02-07" class="fc-day-number">7</td>
</tr>
</thead>
</table>
</div>
I dont have any sample code as I am stuck really on how to approach this.
// This only gives me the value of the attribute
$this.parent().find('.fc-day-number').attr('data-date');
Just use attribute selector whose syntax is [attributeName[=attributeValue]]
var value = "2015-02-01";
$('[data-date="' + value + '"]').append('html here');
Note, that you can apply the above selector in find, closest and other such jQuery methods that accept a CSS selector.
Use jQuery Attribute Equals selector
then use jQuery html() to add content
or use jQuery append() to append content
here is the html() fiddle
I think is that you want :
var date = "2015-02-03";
$("td[data-date='" + date + "']").append(date);
Solution on this url : http://jsfiddle.net/g09jvfxy/1/
I have the following code:
<%-- other tags --%>
<table>
<tr width="100%">
<td width="130" />
<td id="BottomCell" width="100%" />
</tr>
<tr>
<td/>
<td/>
</tr>
</table>
<%-- other tags --%>
There may be more than one table on the page. I want the td before "BottomCell" to be removed (or hidden) when the page is loaded. How can I do this with javascript or css?
Thanks.
BTW, I'm developing a Sharepoint WebPart that will be put onto a page. The is on that page, which i don't have control of directly. But the WebPart should remove this as long as it shows up on the page.
Wow, going back to basics after using a framework is hard work.
var element = document.getElementById('BottomCell').previousSibling;
var parent = element.parentNode;
parent.removeChild(element);
In jQuery:
$('#BottomCell').prev().detach();
Well, assuming you have only one table, then you could do something like this (in javascript):
var firstCell = document.getElementsByTagName('tr')[0].getElementsByTagName('td')[0];
firstCell.parentNode.removeChild(firstCell);
It would get the first cell of the first row in the entire DOM tree, and remove that cell.
tr > td should do the trick.
Child and Sibling selectors
http://css-tricks.com/child-and-sibling-selectors/
#diodeus if there are only 2 data cells that would be acceptable, however if you wish to remove the first data cell regardless of however many cells are located in that row, you can do something like
var el = document.getElementById('BottomCell');
el.removeChild(el.parentNode.firstChild);
In jQuery I would find the parent and use the :first selector probably