how to add double click event on a table row using javascript???

Question

var nextRow = tbl.tBodies[0].rows.length;
var row = tbl.tBodies[0].insertRow(nextRow);
row.setAttribute('ondblclick', "return move_to_x_graph();");

this code will add a double click event on row.. Right.. But the thing is its not working in case of internet explorer.Its workin fine in case of all the other browsers..

For adding style i am handling this:

var cell2 = row.insertCell(1);

var browser=navigator.appName; if(browser == "Microsoft Internet Explorer") { cell2.style.setAttribute("cssText", "color:black; width:300px;");

}else { cell2.setAttribute("style", "color:black; width:300px;");

}

can any body help me how to add double click event using javascript that will also work in internet explorer??

Answer 1

With jQuery:

$(row).bind("dblclick", function(){return move_to_x_graph();});

Also, maybe you can add it to the cells instead of the row:

$(row).find("td").bind("dblclick", function(){return move_to_x_graph();});

If you are not using jquery, give it a try, it makes things easier. Or any other framework like Prototype or so.

Answer 2

Instead of passing a string argument. Try passing a function literal like this:

row.setAttribute('ondblclick', function () {return move_to_x_graph();});

Answer 3

Don't set event handlers using setAttribute, it doesn't work as you'd expect in IE. Instead set it directly on the equivalent event handler property of the element:

row.ondblclick = function() {
    return move_to_x_graph();
};