Table Row Background onClick?

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
I have a table row with a dropdown and a checkbox, but I want the table
rows onClick event to fire only when the user clicks the background of
the row and not the dropdown or checkbox. How can I do this?


Re: Table Row Background onClick?

To further the education of mankind, vouchsafed:

Quoted text here. Click to load it

Javascript.  You may have to do an "add and cancel" where the foreground
link/pseudo-link cancels the background pseudo-link.

Infinity has its limits.

Re: Table Row Background onClick?

Hey there Afrinspray,

To make sure I understand your question, you only want to perform some
action when a row is clicked, but not specific elements in that row?

One way to solve this problem is, first, to figure out what element the
user clicked (i.e. a selection list, or a checkbox, etc).  Then create
an array of those elements' ids to check against.  With this array you
can traverse though it and check to see if the element that was clicked
is in the 'noAction' array, otherwise, perform the desired action.
Here is some example code that you can check out (works on firefox and
IE 6):

        <title>MouseClick Test</title>


        <script language="javascript" type="text/javascript">

          /* do something unless certain elements were clicked... */
            function doSomething(mouseEvent) {
                var elementID;
                                //if event doesn't exist,
                                //use window.event
                    mouseEvent = window.event;

                // get the id of the element that was clicked (firefox)
                    elementID =;
                // get the id of the element that was clicked (IE)
                else if(mouseEvent.srcElement)
                    elementID =;

                // perform the desired action UNLESS these
                // elements are clicked
                var noActionIDs = new Array();
                noActionIDs[0] = "checkboxID";
                noActionIDs[1] = "selectID";

                for(var i = 0; i < noActionIDs.length; i++) {
                    if(elementID == noActionIDs[i])


            /* alert when the row was clicked, but not the
             * specified elements
            function performAction() {
                alert("The row was clicked!");


        <table border="1">
            <tr onclick="doSomething(event)">
                    <input type="checkbox" id="checkboxID" />
                    <select id="selectID">
                        <option>Some Option</option>
                    <span>blah blah blah blah</span>
                    <span>bloo bloo bloo bloo</span>


(hope this helps) wrote:
Quoted text here. Click to load it

Re: Table Row Background onClick?

Wow thanks so much!  I can't believe you put so much time into helping
me., you are a godsend.

Bless your heart,
Afrinspray wrote:
Quoted text here. Click to load it

Site Timeline