删除不工作动态表中铬的工作，但在Mozilla

Question

我有添加和删除按钮如下动态表：

HTML：

<TABLE ID="tblPets" border="1" STYLE="border width:1 orange dashed;background color:#F0E68C;table-row width:2;"> 
<TR><TH>Rownum</TH><TH WIDTH="70">Animal</TH><TH WIDTH="230">Name</TH><TH WIDTH="70">Age</TH><TD ALIGN="center"><INPUT TYPE="Button" onClick="addRow('tblPets')" VALUE="Add Row"></TD></TR> 
<TR><TD>1</TD><TD>Dog</TD><TD>Scooby Doo</TD><TD>6</TD><TD><INPUT TYPE="Button" CLASS="Button" onClick="delRow()" VALUE="Delete Row"></TD></TR> 
<TR><TD>2</TD><TD>Cat</TD><TD>Tom</TD><TD>4</TD><TD><INPUT TYPE="Button" CLASS="Button" onClick="delRow()" VALUE="Delete Row"></TD></TR> 
<TR><TD>3</TD><TD>Mouse</TD><TD>Jerry</TD><TD>1</TD><TD><INPUT TYPE="Button" CLASS="Button" onClick="delRow()" VALUE="Delete Row"></TD></TR> 
</TABLE> 

JAVASCRIPT：

<SCRIPT TYPE="text/javascript"> 
    var count = "1"; 
    function addRow(in_tbl_name) 
    { 
    var tbody = document.getElementById(in_tbl_name).getElementsByTagName("TBODY")[0]; 
    // create row 
    var row = document.createElement("TR"); 
    // create table cell 1 
    var td1 = document.createElement("TD") 
    var strHtml1 = "<FONT SIZE=\"+3\">*</FONT>"; 
    td1.innerHTML = strHtml1.replace(/!count!/g,count); 
    // create table cell 2 
    var td2 = document.createElement("TD") 
    var strHtml2 = "<SELECT NAME=\"Animal\"><OPTION VALUE=\"Cat\">Cat<OPTION VALUE=\"Dog\">Dog<OPTION VALUE=\"Mouse\">Mouse</SELECT>"; 
    td2.innerHTML = strHtml2.replace(/!count!/g,count); 
    // create table cell 3 
    var td3 = document.createElement("TD") 
    var strHtml3 = "<INPUT TYPE=\"text\" NAME=\"in_name\" SIZE=\"30\" MAXLENGTH=\"30\" STYLE=\"height:24;border: 1 solid;margin:0;\">"; 
    td3.innerHTML = strHtml3.replace(/!count!/g,count); 
    // create table cell 4 
    var td4 = document.createElement("TD") 
    var strHtml4 = "<INPUT TYPE=\"text\" NAME=\"in_name\" SIZE=\"5\" MAXLENGTH=\"5\" STYLE=\"height:24;border: 1 solid;margin:0;\" READONLY>"; 
    td4.innerHTML = strHtml4.replace(/!count!/g,count); 
    // create table cell 5 
    var td5 = document.createElement("TD") 
    var strHtml5 = "<INPUT TYPE=\"Button\" CLASS=\"Button\" onClick=\"delRow()\" VALUE=\"Delete Row\">"; 
    td5.innerHTML = strHtml5.replace(/!count!/g,count); 
    // append data to row 
    row.appendChild(td1); 
    row.appendChild(td2); 
    row.appendChild(td3); 
    row.appendChild(td4); 
    row.appendChild(td5); 
    // add to count variable 
    count = parseInt(count) + 1; 
    // append row to table 
    tbody.appendChild(row); 
    } 
    function delRow() 
    { 
    var current = window.event.srcElement; 
    //here we will delete the line 
    while ((current = current.parentElement) && current.tagName !="TR"); 
     current.parentElement.removeChild(current); 
    } 
</SCRIPT> 

我已经接受了本教程“http://www.joegarrepy.com/tableaddrow_jscript.htm”。但在教程中它的工作正常。当我检查它添加工作，但删除不工作在所有 请帮助我！

Answer 1

在桌子上有：

<TR> 
    <TD>1</TD> 
    <TD>Dog</TD> 
    <TD>Scooby Doo</TD> 
    <TD>6</TD> 
    <TD><INPUT TYPE="Button" CLASS="Button" onClick="delRow()" VALUE="Delete Row"></TD> 
</TR> 

更改的onclick属性传递到按钮的引用：

... onClick="delRow(this)" ... 

然后函数内，使用该引用要上去父TR（如果有）删除它：

function delRow(el) { 
    while(el && el.tagName && el.tagName.toLowerCase() != 'tr') { 
    el = el.parentNode; 
    } 
    if (el && el.tagName && el.tagName.toLowerCase() == 'tr') { 
    el.parentNode.removeChild(el); 
    } 
}