Javascript creating an onclick event for a dynamic table row -

Javascript creating an onclick event for a dynamic table row -

i'm having problem attaching onclick event dynamic table rows.

what have here:

function parseorderline(data) { var obj = json.parse(data); if (obj.length > 0) { var tbl = document.createelement('table'); var row = tbl.insertrow(0); var cell = row.insertcell(0); cell.innerhtml = "code"; cell = row.insertcell(1); cell.innerhtml = "size"; cell = row.insertcell(2); cell.innerhtml = "description"; cell = row.insertcell(3); cell.innerhtml = "type"; cell = row.insertcell(4); cell.innerhtml = "price"; cell.style.textalign = "right"; (var = 0; < obj.length; i++) { row = tbl.insertrow(i + 1); row.classname = "results_row"; cell = row.insertcell(0); cell.innerhtml = obj[i].code; cell = row.insertcell(1); cell.innerhtml = obj[i].size; cell = row.insertcell(2); cell.innerhtml = obj[i].description; cell = row.insertcell(3); cell.innerhtml = obj[i].type; cell = row.insertcell(4); cell.innerhtml = parsefloat(obj[i].price).tofixed(2); cell.style.textalign = "right"; //row.addeventlistener("click", function(){ alert('listen'); }); row.onclick = (function(){ alert('click'); }); } homecoming tbl.outerhtml; } else { ...

as can see have tried both setting onclick event , adding listener. neither seem work.

i'm hoping can tell me i'm beingness crazy , have overlooked obvious. ;0)

any help appreciated guys.

thanks reading.

jas

your problem on tbl.outerhtml.

when add together event listener using addeventlistener, javascript not add together method html code in onclick attribute, added dom. when utilize tbl.outerhtml listener isn't added returned html code. same applicable row.onclick = function()...

if want maintain event listener when using outerhtml suggest go setattribute:

class="snippet-code-js lang-js prettyprint-override">function createtable() { var obj = [1,2,3,4,5]; var tbl = document.createelement('table'); var row = tbl.insertrow(0); var cell = row.insertcell(0); cell.innerhtml = "code"; cell = row.insertcell(1); cell.innerhtml = "size"; cell = row.insertcell(2); cell.innerhtml = "description"; cell = row.insertcell(3); cell.innerhtml = "type"; cell = row.insertcell(4); cell.innerhtml = "price"; cell.style.textalign = "right"; (var = 0; < obj.length; i++) { row = tbl.insertrow(i + 1); row.classname = "results_row"; cell = row.insertcell(0); cell.innerhtml = obj[i].code; cell = row.insertcell(1); cell.innerhtml = obj[i].size; cell = row.insertcell(2); cell.innerhtml = obj[i].description; cell = row.insertcell(3); cell.innerhtml = obj[i].type; cell = row.insertcell(4); cell.innerhtml = parsefloat(obj[i].price).tofixed(2); cell.style.textalign = "right"; //row.addeventlistener("click", function(){ alert('listen'); }); row.setattribute('onclick', "(function(){ alert('click'); })()"); } homecoming tbl.outerhtml; } document.getelementbyid('test').innerhtml = createtable(); class="snippet-code-html lang-html prettyprint-override"><div id="test"></div>

however it's not best solution, should not utilize outerhtml when want in fact utilize object created (in case, table). should add together in dom using appendchild method, doing way can utilize addeventlistener:

class="snippet-code-js lang-js prettyprint-override">function createtable() { var obj = [1,2,3,4,5]; var tbl = document.createelement('table'); var row = tbl.insertrow(0); var cell = row.insertcell(0); cell.innerhtml = "code"; cell = row.insertcell(1); cell.innerhtml = "size"; cell = row.insertcell(2); cell.innerhtml = "description"; cell = row.insertcell(3); cell.innerhtml = "type"; cell = row.insertcell(4); cell.innerhtml = "price"; cell.style.textalign = "right"; (var = 0; < obj.length; i++) { row = tbl.insertrow(i + 1); row.classname = "results_row"; cell = row.insertcell(0); cell.innerhtml = obj[i].code; cell = row.insertcell(1); cell.innerhtml = obj[i].size; cell = row.insertcell(2); cell.innerhtml = obj[i].description; cell = row.insertcell(3); cell.innerhtml = obj[i].type; cell = row.insertcell(4); cell.innerhtml = parsefloat(obj[i].price).tofixed(2); cell.style.textalign = "right"; row.addeventlistener("click", (function(){ alert('click'); })); } homecoming tbl; } document.getelementbyid('test').appendchild(createtable()); class="snippet-code-html lang-html prettyprint-override"><div id="test"></div>

javascript