Passing table row identifiers

Question

The following question may be easy for most of you. But I'm just starting JavaScript, and I really would appreciate it if someone could point me in the right direction.

I have a regular HTML table in which each row has its own identifier. I want to ensure that every time I click on a link in a line, the identifier for this line should be stored in a variable and then passed to a function. Let them say that I press line # 1, then I need to pass id # 1 and so on ... How can I achieve this?

Thanks.

Answer 1

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

Answer 2

When you organize an event handler to respond to clicks, the browser will install everything so that you can figure out which item was clicked (the "target" of the event). In your Javascript, you can 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 just one of many different approaches. If you used the Javascript framework / library, it would be a little simplified, perhaps, but not much.

Note that this approach handles clicks at the <table> level instead of the rows themselves. This makes initialization a little easier.

Answer 3

As in another example, here you can do it 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 very well solved by jQuery . If you perform other operations like this, jQuery will save you a ton of time and maintain the level of complexity of your code. Compare the above:

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

bind is a jQuery method that simply binds an event to a handler :)

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

Answer 4

The easiest way to do this is to use the 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 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