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);
  }
}

删除不工作动态表在chrome中工作但在mozilla中不工作

1 个答案: