4

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 normal 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.

2
  • Are you using a JavaScript library ( MooTools, Prototype, jQuery, Glow, Scriptaculous...), or 'plain'-vanilla JavaScript? Dec 19, 2010 at 21:41
  • Two small remarks: 1) ID can't start with a digit. Use something like "row1" not "1" as an id. B) In many (if not most) cases it makes more sense to pass a reference to the row to your function instead of the id. What are you doing in your function? If you answer this you could get a more specific answer.
    – RoToRa
    Dec 19, 2010 at 22:46

4 Answers 4

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

0

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.

0

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/

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.