Javascript为动态表格行创建onclick事件

Question

I'm having trouble attaching an onclick event to my dynamic table rows.

What I have is 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";
        for (var i = 0; i < 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'); });
        }
        return tbl.outerHTML;
    }
    else { ...

As you can see I have tried both setting the onclick event and adding a listener. Neither seem to work.

I'm hoping someone can tell me I'm just being crazy and have overlooked something obvious. ;0)

Any help appreciated guys.

Thanks for reading.

Jas

Answer 1

Your problem is on the tbl.outerHTML .

When you add an event listener using addEventListener , Javascript does not add the method to your HTML code in the onclick attribute, it is added only to the DOM. So when you use tbl.outerHTML you listener isn't added to the returned HTML code. The same is applicable for the row.onclick = function()...

If you want to keep the event listener when using outerHTML I suggest you go with setAttribute :

 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"; for (var i = 0; i < 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'); })()"); } return tbl.outerHTML; } document.getElementById('test').innerHTML = createTable(); 

 <div id="test"></div> 

HOWEVER it's not the best solution, you should not use outerHTML when you want in fact use the object you just created (in your case, the table). You should add it in the DOM using the appendChild method, doing this way you can use addEventListener :

 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"; for (var i = 0; i < 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'); })); } return tbl; } document.getElementById('test').appendChild(createTable()); 

 <div id="test"></div>