Passing IDs of table rows

the following question might be an easy one for most of you. But I am just beginning JavaScript and I really would appreciate if someone could point me in the right direction.

I have a norma开发者_开发技巧l HTML table where each row has its own id. What I want to achieve is that each time I click a link in a row the id for that row should be stored in a variable and later passed to a function. Let's say I click row#1 then id#1 should be passed and so on... How can I achieve this?

Thank you.

This should work:

var currentRowID, table = document.getElementById('your-table');
var rows = table.rows;
var row_count = rows.length;

for(var i = 0; i < row_count; i++) {
    rows[i].onclick = function() {
       currentRowID = this.id;
       //do something with currentRowID here...
    };
}

jsFiddle example

When you arrange for an event handler to respond to clicks, the browser will set things up so that you can figure out what element was clicked (the "target" of the event). In your Javascript, you could do something like this, assuming your <table> is the only table on the page:

function handleRowClicks(e) {
  e = e || window.event;
  if (!e.target.tagName.toLowerCase() === "tr") return;
  var rowId = e.target.id;
  /*
    whatever you want to do goes here
  */
}

// To set up the event handler, do this in your "window.onload" or some
// other initialization point

document.getElementsByTagName("table")[0].onclick = handleRowClicks;

This is only one of a bunch of different approaches. If you were to use a Javascript framework/library, it would get a little simpler, probably, but not much.

Note that this approach handles the clicks at the level of the <table> instead of the rows themselves. That saves a little bit of initialization work.

Similar to the other example, here's how you could do this in pure JavaScript:

// Pure JavaScript:
var table = document.getElementById("table-one");
var rows = table.rows;
var length = rows.length;

for(var i = 0; i < length; i++) {
    rows[i].onclick = function() {
        alert(this.id);
        // Do more stuff with this id.
    }
}

In my opinion, this particular problem is solved very nicely by jQuery. If you're performing other operations similar to this, jQuery will save you a ton of time, and keep the complexity level of your code down. Compare the above with this:

// jQuery:
$("#table-one tr").bind("click", function() {
    alert(this.id);
});

bind is a jQuery method that just, well, binds an event to a handler :)

Working sample: http://jsfiddle.net/andrewwhitaker/9HEQk/

The easiest way to do that is using jQuery framework.

// Your function
function MyFunc(rowId){
    alert(rowId);
}
// Binde click event to all rows with class "ClockableRow" 
// within table with class "clickableTable"
$(".clickableTable .clickableRow").click(function(){
    // Call you function and pass clicked row ID there
    MyFunc($(this).attr("id"));
})

You table shoul look like this:

<table class="clickableTable">
    <tr id="row1" class="clickableRow"><td>row 1</td></tr>
    <tr id="row2" class="clickableRow"><td>row 2</td></tr>
    <tr id="row3" class="clickableRow"><td>row 3</td></tr>
    <tr id="row4" class="clickableRow"><td>row 4</td></tr>
    <tr id="row5" class="clickableRow"><td>row 5</td></tr>
</table>

example