html - JavaScript: dynamic delete row operation error -


i trying on following code;

why deleterow() don't alert "hi" when click on delete button first time(nor delete row). surprisingly work 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');         (var = 0; < 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;             (i = 1; < 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 code don't run in first click , why run in second?

the reason because onclick event handler rows getting attached when delete button clicked first time.

they have attached onload itself. can below:

window.onload = deleterow; 

demo fiddle


Comments

Popular posts from this blog

java.util.scanner - How to read and add only numbers to array from a text file -

rewrite - Trouble with Wordpress multiple custom querystrings -

php - Accessing static methods using newly created $obj or using class Name -