JavaScript: dynamic delete row operation error

Question

I am trying on following code;

Why doesn't deleteRow() alert "hi" when we click on delete button for first time (nor it delete row)? Surprisingly it will work perfectly second time.

HTML

<div style="height: 190px;overflow: auto;left:220px;width:710px;" id="filterTable">
            <table id="filterTableBody" style="border-collapse: collapse; border: 1px solid black;width:690px;" border="1">
                <tbody><tr bgcolor="#FF6600">
            <td><strong>
                    and/or&nbsp;&nbsp;&nbsp;
                </strong></td>
                <td><strong>
                    Column Name&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                </strong></td>
                <td><strong>
                    operator&nbsp;&nbsp;&nbsp;
                </strong></td>
                <td><strong>
                    Filter&nbsp;&nbsp;&nbsp;
                </strong></td>

                <td><strong>
                    Delete&nbsp;&nbsp;&nbsp;
                </strong></td>
            </tr>
            <tr><td>&nbsp;</td><td>WORKGROUP_NAME</td><td>!=</td><td>ABDEL HAMEID</td><td><a href="javascript:deleteRow()"><img src="/images/delete.gif"></a></td></tr></tbody></table>
            </div>

Javascript

 function deleteRow(){
        var table = document.getElementById('filterTableBody');
        var rows1 = table.getElementsByTagName('tbody')[0].getElementsByTagName('tr');
        for (var i = 0; i < rows1.length; i++) {
            rows1[i].onclick = (function() {
            alert("hi");
                table.deleteRow(this.rowIndex);
                var oTable = document.getElementById('filterTableBody');

            //gets rows of table
            var rowLength = oTable.rows.length;
            for (i = 1; i < rowLength; i++){

                   var oCells = oTable.rows.item(i).cells;
                   //gets cells of current row
                   var cellLength = oCells.length-1;
                       for(var j = 0; j < cellLength; j++){
                           oCells.item(j).innerHTML = "";
                           break;
                       }
                       break;
            }
        });
    }

}

Why doesn't the code run in first click and why it runs in the second?

Harry · Accepted Answer · 2013-10-07 07:50:59Z

1

The reason is because the onclick event handler for the rows are getting attached only when the Delete button is clicked for the first time.

They have to be attached onload itself. You can do it like below:

window.onload = deleteRow;

Demo Fiddle

answered Oct 7, 2013 at 7:50

Harry

90.1k26 gold badges216 silver badges224 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

atom217 Over a year ago

firebug is giving following error<br>TypeError: rows[i] is undefined rows[i].onclick = (function() {

Harry Over a year ago

Did that error happen after you added window.onload? Did you make any other changes to code given in question? Can you show me your current updated code? Because, the code should work (as can be seen in the fiddle demo).

atom217 Over a year ago

because I am working on dialog box that also dynamically creating table. I am unable to use window.onload = deleteRow;(it is best suit if your table exist onLoad event) Although i tried but it won't work

Harry Over a year ago

You mean there is no table with id='filterTableBody' on initial page load? If yes, attach the Event handler to the rows within the function that creates the rows.

Harry Over a year ago

Also, you have a delete button but attaching the action to the whole row instead of just to the button. Is that what you really need?

|

atom217 · Accepted Answer · 2013-10-08 04:30:44Z

0

This code works for me. Thank you @harry for pin pointing the problem.

function deleteRowUI(btndel) {
            var table=document.getElementById('filterTableBody');
            if (typeof(btndel) == "object") {
                p=btndel.parentNode.parentNode;
                p.parentNode.removeChild(p);
                var oTable = document.getElementById('filterTableBody');

                //gets rows of table
                var rowLength = oTable.rows.length;
                for (var i = 1; i < rowLength; i++){

                       var oCells = oTable.rows.item(i).cells;
                   //gets cells of current row
                   var cellLength = oCells.length-1;
                       for(var j = 0; j < cellLength; j++){
                           oCells.item(j).innerHTML = "";
                           break;
                       }
                       break;
            }
        } else {
            return false;
        }
    }

answered Oct 8, 2013 at 4:30

atom217

9871 gold badge14 silver badges27 bronze badges

1 Comment

Harry Over a year ago

Good that you have managed to solve it mate. Mark the answer as accepted. Also, I don't think you need to get document.getElementById('filterTableBody') into two separate variables. One should be enough (remove the var table as it is unused) :)

Collectives™ on Stack Overflow

JavaScript: dynamic delete row operation error

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related