How to pass a variable as a function parameter

Question

I have this function that turns cells with class editable ( td.editable ) to input fields. Now, you have to pass the row to the function. For example: editRow(myRow) .

So using this.parentNode.id , I get the id of the row. But when I pass the value as a parameter to the editRow function, it does nothing.

I think the function thinks that rowId is the actual name of the row, instead of using the contents of the rowId variable as the name of the row.

function editRow(row) {
 $('td.editable',row).each(function() {
  $(this).html('<input type="text" value="' + $(this).html() + '" size="10" />');
 });
}    

/* click on cell with .editable class */
 $(".editable").click(function() {
   rowId = this.parentNode.id;
   editRow(rowId);
});

Answer 1

editRow doesn't take a row id, it takes an entire row (the DOM Element itself). You're simply passing the wrong data. Try:

$('.editable').click(function(){
    editRow(this.parentNode);
});

Answer 2

Given your function here:

/* click on cell with .editable class */
$(".editable").click(function() {
rowId = this.parentNode.id;
editRow(rowId);
});

You are passing the id to your editRow function. So inside editRow, you can just do this:

function editRow(row) {
    $('#' + row +' td.editable').each(function() {
        $(this).html('<input type="text" value="' + $(this).html() + '" size="10" />');
    });
}

'#' is the jquery id selector