Develop Reference

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>

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

Rails 3 jQuery : How to alert id of td

I have a 3x3 table of td's each with id's (id='a1'...id='c3'). I'd like to be able to click on any of the 9 td's and to alert the id of that td.
Here is my Coffeescript (in the asset pipeline)
$(document).ready ->
$("td").click ->
alert(#I would like to alert the id of whichever of the 9 td cell's have been clicked on)
Here's my index.html.erb
<table>
<tbody>
<tr>
<td id='a1'>A1</td>
<td id='b1'>B1</td>
<td id='c1'>C1</td>
</tr>
<tr>
<td id='a2'>A2</td>
<td id='b2'>B2</td>
<td id='c2'>C2</td>
</tr>
<tr>
<td id='a3'>A3</td>
<td id='b3'>B3</td>
<td id='c3'>C3</td>
</tr>
</tbody>
</table>
I'm horrible at JS so any help is appreciated!

$('td').click: (e)->
alert $(#).id
Same in CoffeeScript
Also, storing user data with html element is very easy with data-* attributes, for example:
<td data-id="42"></td>
And getting this id is easy with jQuery data method like follows:
var id = $('td').data('id');

First off, using jQuery on yields better performance than attaching a click handler to each td, especially if you have lots of tds:
$('table').on 'click', 'td', (event) ->
# event.currentTarget is the td which was clicked
alert event.currentTarget.id
event.currentTarget will be a DOM element object, and so every attribute will be available as a property of the object. The other answers referring to $(this).id are wrong, since $(this) (or $(event.currentTarget)) is a jQuery object, and as such attributes are available with the attr method: $(this).attr('id').

How do I disable the onclick event

How do I disable the onclick event?
I've tried onclick="this.disabled=true;", but it doesn't work.
Here is an HTML table:
<table>
<tr>
<td onclick="parent.location='home.php'">Available</td>
<td onclick="parent.location='home.php'">Available</td>
</tr>
<tr>
<td onclick="parent.location='home.php'"><div onclick="this.disabled=true;">Booked</div></td>
<td onclick="parent.location='home.php'">Available</td>
</tr>
</table>
Using the above code it is still going to home.php, even if i click on the table cell marked `Booked'.

You need to prevent the event from bubbling upwards.. most simple way:
<div onclick="event.cancelBubble = true;">Booked</div>
Tested successfully for IE8, Chrome and Firefox.

you should overwrite the onclick with a function that returns false (as in: "the click is consumed"). So you'd do something like
onclick="return false;"
wait. i meant false :)

Personally, I think you would be best served to take the 'onclick' off of the TD and place it on the div within it(similar to how you have booked). Then you can decide in your PHP logic whether to put an 'onclick' on the div or leave it off(you wouldn't need to try to override it then).

Delete a table row with javascript / jquery

This is not working. Firebug is not throwing any error though.
HTML:
<table>
<tr><td>BookA</td><td>Delete</td></tr>
<tr><td>BookB</td><td>Delete</td></tr>
<tr><td>BookC</td><td>Delete</td></tr>
<tr><td>BookD</td><td>Delete</td></tr>
</table>
Javascript:
function deleteRow(ref) {
$(ref).parent().parent().remove();
}
If possible, I would like to use a solution with inline javascript

First of all, inline JavaScript (href="javascript:x" or onclick="x") is generally bad. With inline JavaScript, you won't have access to the event object, and you can't really be sure what this references to.
jQuery (and almost every other JavaScript library/framework) has built-in event handling. So, your code would look like this with event handlers:
$('a.red').click(function(e) {
e.preventDefault(); // don't follow the link
$(this).closest('tr').remove(); // credits goes to MrKurt for use of closest()
});
And here's a demo: http://jsbin.com/okaxu

Try this:
// Bind all the td element a click event
$('table td.deleteRow').click(function(){
$(this).parent().remove();
});
By the way, it'll remove the javascript from your html code.
With this html code
<table>
<tr>
<td>BookA</td>
<td class="red deleteRow">Delete</td>
</tr>
<tr>
<td>BookB</td>
<td class="red deleteRow">Delete</td>
</tr>
<tr>
<td>BookC</td>
<td class="red deleteRow">Delete</td>
</tr>
<tr>
<td>BookD</td>
<td class="red deleteRow">Delete</td>
</tr>
</table>

remove inline scripting
<script>
$(function(){
$('table td a').live('click', function(){
$(this).parents('tr').remove();
return false;
});
});
</script>

This won't work because $(this) isn't referring to the a-tag as you think (I think its referring to the window object or something)
Instead of using inline javascript in the href-attribute do this
Instead do this
<script type="text/javascript">
$("table a").click( function() {
$(this).parent().parent().remove();
});
</script>

I believe you have a bug in your deleteRow function. Here's how it should be written:
function deleteRow(ref) {
ref.parent().parent().remove();
}
The ref that you are passing into deleteRow is already a jQuery object. You shouldn't use $(ref), just ref alone since ref is already a jQuery object.

I would have to agree that inline javascript should be avoided, but if there is some other reason that it is necessary or beneficial to use it, here's how.
<table>
<tr><td>BookA</td><td>Delete</td></tr>
<tr><td>BookB</td><td>Delete</td></tr>
<tr><td>BookC</td><td>Delete</td></tr>
<tr><td>BookD</td><td>Delete</td></tr>
</table>