CODEWITHSUNDEEP
javascript
GreenTriangle
GreenTriangle

Reputation: 2460

Adding event handlers to each table row that will affect only that table row?

This isn't actually something I'm currently attempting to do; it just occurred to me while working with another table that I have no idea how I'd go about doing it, and the entire time on the train ride home I was puzzling over different solutions, none of which I could imagine working.

Imagine this situation: there is a table of 50 rows. On each row is a button. When clicked, this button should do something to the row it's on -- say, make all its text strikethrough, or make an AJAX call with the first cell's value, or something.

How would you go about binding those event handlers?

My initial thought was something like

buttons = document.getElementsByTagName("input");
rows = document.getElementsByTagName("tr");
for (i=0;i<buttons.length;i++) {
    buttons[i].addEventListener('click',function() {
        makeAjaxCall(rows[i]);
    }); 
};

That is,

  1. For each button in the document,
  2. Add an event handler to that button,
  3. Which will makeAjaxCall with the data of the row whose number corresponds to the button.

The problem, of course, being that makeAjaxCall will check the value of i when it's invoked, by which time, i is equal to buttons.length, and so the function will only ever work on the final row of the table.

So I suppose you'd need to find some way to actually hard-code the current value of i within the function handler... and that's something I don't even think is possible. Is it? How would you actually do something like this?

Upvotes: 0

Views: 1699

Answers (2)

bottens
bottens

Reputation: 3902

Interesting problem. I would go about doing it the way @kennebec suggests in the comment above.

Here is the fiddle: http://jsfiddle.net/u988D/

First, a slight change in markup to add data attributes

HTML

<table>
    <tr>
        <td data-to-json="id">1</td>
        <td data-to-json="text">Lorem ipsum dolor.</td>
        <td><button type="button">Click Me</button></td>
    </tr>
    <tr>
        <td data-to-json="id">2</td>
        <td data-to-json="text">Lorem ipsum dolor.</td>
        <td><button type="button">Click Me</button></td>
    </tr>
    <tr>
        <td data-to-json="id">3</td>
        <td data-to-json="text">Lorem ipsum dolor.</td>
        <td><button type="button">Click Me</button></td>
    </tr>
</table>

Then the javascript. Probably can be optimized a bit more.

JS

var table = document.querySelector("table")

table.addEventListener("click", function(e) {
    var element = e.target,
        parent
    
    //If the element is a button
    if ( element && element.nodeName == "BUTTON" ) {
        parent = element.parentNode
        
        //Find the closest parent that is a TR
        while ( parent.nodeName !== "TR" ) {
            parent = parent.parentNode
        }
        
        //Convert Row to JSON
        var json = {},
            child
        
        for ( var i = 0, _len = parent.children.length; i < _len; i++ ) {
            child = parent.children[i]
            
            if ( child.hasAttribute("data-to-json") ) json[child.getAttribute("data-to-json")] = child.innerText
        }
        
        // Do your AJAX stuff here
        console.log(json)
    }
})

Upvotes: 0

jing3142
jing3142

Reputation: 1871

You can refer to the button object you are adding the event listener to using 'this'

Given the table in this format

<table>
    <tr>
        <td> <input type='button'> </td>
        <td> 1st <td>
    </tr>
    <tr>
        <td> <input type='button'> </td>
        <td> 2nd <td>
    </tr>
    <tr>
        <td> <input type='button'> </td>
        <td> 3rd <td>
    </tr>
</table>

The following code will allow you to access the data in the next cell, shown using console.log() rather than any ajax calls of course.

buttons = document.getElementsByTagName("input");
for (i=0;i<buttons.length;i++) {
    buttons[i].addEventListener('click',function() {
        makeAjaxCall(this);
    }); 
};

function makeAjaxCall(btn) {
    var sib=btn.parentNode.nextSibling;
    while (sib.nodeName !='TD') {
        sib=sib.nextSibling;
    }
    console.log(sib.innerHTML);
}

This can be extended to find any data in the row.

This section 

while (sib.nodeName !='TD') {
   sib=sib.nextSibling;
}

skips any extraneous characters (white space etc) between cells.

Fiddle Here

Upvotes: 1

Related Questions