CODEWITHSUNDEEP
javascriptjquerydomhtml-table
sichinumi
sichinumi

Reputation: 1875

Javascript DOM Trickiness

I'm having a bit of trouble figuring out how to go about self-referencing a table row in Javascript.

Here's the boiled down code:

$( "#listitems tbody" ).append( "<tr onclick=\"editListItem(this)\">" +
        "<td>" + id.val() + "</td>" +  
        "<td>" + title.val() + "</td>" + 
        "<td>" + description.val() + "</td>" + 
        "<td>" + TF + "</td>" + 
        "<td style=\"visibility: hidden;\">" + id.val() + "</td>" + 
"</tr>" );

As you can see, I'm setting the contents of this table row and cells dynamically. However, I need to pass a reference to this table row into its onClick function, which calls this Javascript method:

function editListItem(obj) {
    var id = obj.cells[4].innerHTML;
    var cells = document.getElementById('listitems').rows[id].cells;
    DATA[0] = cells[0].innerHTML;
    DATA[1] = cells[1].innerHTML;
    DATA[2] = cells[2].innerHTML;
    DATA[3] = cells[3].innerHTML;
}

In this method, I need to access the value contained inside the 4th "hidden" cell of the table row that was clicked. I normally would just pass the ID variable into the onClick method, but this table's contents can be sorted and rearranged, so the ID variable will not necessarily correspond to the contents of the row.

I've been Googling for the past four hours but can't find any specific examples for this situation; everything I've tried just triggers a Javascript error proclaiming that obj.cells, obj[4], obj.childNodes, etc, does not exist, depending on which one I'm trying.

Does anyone know how you can access the innerHTML of table cell elements inside a table row element by passing "this" into the table row's onClick?

Please let me know if any part of this was confusing, I'm trying to get this done before I leave today or I know I'll forget it all and have to start all over.

Upvotes: 0

Views: 185

Answers (3)

pthurlow
pthurlow

Reputation: 1111

From the looks of your code, your using jQuery so you can easily grab the 5th td by using 

$(this).children('td').eq(4)

and then do whatever you want with that jQuery element

checkout jQuery eq selector for more info

Upvotes: 1

Alnitak
Alnitak

Reputation: 340055

Create your <tr> element on its own first, and use proper JS to register the handler rather than embedding the handler in the element's attributes:

var tr = $('<tr>').click(editListItem);
$("#listitems tbody").append(tr);
$(tr).append( ... );

In editListItem, this will automatically apply to the whole row element:

function editListItem(row) {
    var cells = $(this).children('td');
    var id = $cells.eq(4).text();
    var data = [];
    data[0] = cells.eq(0).html();
}

Upvotes: 1

user578895
user578895

Reputation:

how about:

$( "#listitems tbody" ).append(
    $('<tr>....</tr>')
        .bind('click', function(){
            var tds = $(this).find('td'),
                 id = tds.eq(4).text();
        })
);

And if that's not what you meant, let me know. I'm not 100% sure I understand what you're asking for :)

Upvotes: 2

Related Questions