Develop Reference

How to get a value of <td> tag

I am getting <td value="1414">Nishant</td> by event.target. I want 1414 and as I try to get value by using event.target.value I am getting undefined. How can I get that value?

td elements don't have value. What you are looking for is to get the value of the attribute value of that element.
You can do this using the getAttribute function:
console.log(document.getElementById('a').getAttribute('value'));
<table>
<tr>
<td id="a" value="123">a</td>
</tr>
</table>

You should use data-* in order to "save" custom data on DOM node.
And then access it via domNode.dataset.* as a camelCase.
document.querySelector("table").addEventListener("click",function(e) {
console.log(e.target.dataset.value);
})
<table>
<tr>
<td data-value="123">a</td>
</tr>
</table>
for very old browsers you can use e.target.getAttribute("data-value")

unable to get hidden field value using parent 's class name

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>

Calling the tr attribute via Jquery and find my inner check box

I have "tr" element with attribute "data-uid". How can I call that "data-uid" in my jquery for finding my checkbox to add the disabled class.
Here is my code :
<tr data-uid="994f164a-5778-49ee-b05e-abb74bbf9b93" role="row">
<td role="gridcell"><label class="row-select-wrapper">
<input type="checkbox" class="row-select"><em></em></label>
</td>
<td role="gridcell">test</td>
<td role="gridcell"></td>
<td role="gridcell"></td>
</tr>
I tried something like this
$('data-uid[994f164a-5778-49ee-b05e-abb74bbf9b93]')
.find('<input type="checkbox"').attr("disabled", "true");

You actually need to enclose the type of attribute selector that you are using in square braces as well when using attribute selectors:
$('[data-uid="994f164a-5778-49ee-b05e-abb74bbf9b93"]').find('<input type="checkbox"')
.attr("disabled", "true");
Additionally, you could simplify your selector if you wanted to target checkboxes beneath your <tr> by using the :checkbox pseudoselector:
// This will disable all checkboxes beneath the specified row
$('[data-uid="994f164a-5778-49ee-b05e-abb74bbf9b93"] :checkbox').prop('disabled',true);

You were close :
$('[data-uid=994f164a-5778-49ee-b05e-abb74bbf9b93]')
.find('input[type=checkbox]').attr("disabled", "true");

Why can I get the value attribute from a table with jQuery and is it safe to use

So I figured I would try to add the 'value' attribute to a TD tag because I need to store a value in a table and really kind of wanted it to be not so obvious, to my amazement, using jQuery I was able to retrieve this value.
My question is why am I able to get this value when it isn't a valid attribute and since I can, would it be safe to use.
HTML
<table id="tblTest">
<tr>
<td value="0">Value is zero</td>
</tr>
<tr>
<td value="1">Value is one</td>
</tr>
</table>
Javascript:
$('#tblTest').on('click','tr', function(){
alert($(this).children(':first').attr('value'));
});
I have created a fiddle for it http://jsfiddle.net/r2Lqp/

If I understand the question, my answer is this: you can add any attributes for personal use if they are not reserved in standards HTML.

Removing some text data in HTML file

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