java - 动态删除表中的行

Question

我正在制作一个邮件网络应用程序。因此，当在顶部显示所有收件箱消息时，我有一个图像按钮来删除在我的邮件表行的相应复选框中选中的所有项目。

我要删除的图像是:

<img src="images/delete.png" /></div>

对于每一行，该行都会从数据库中获取数据，如下所示:

<tr bgcolor="#5D7B9D" color="#FFFFFF" onmouseover="ChangeColor(this, true,true);" onmouseout="ChangeColor(this, false,true);" onclick="DoNav('showmail.jsp?mid=<%=messageid%>');">    
<td><input type="checkbox" onclick="DoRemove(event);" width="20"></td>
<td callspan="3" width="1000px"><%=sendername%>  :   <%=messagesubject%>      <%=sendingtime%></td>
</tr>

现在如何从我的行中动态删除行，同时也从数据库中删除行。请帮忙

编辑:

我试图将所有选中的行复选框 ID 放入一个数组中。这有什么问题吗？

try {
        var checkedrows=[]
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;

        for(var i=0; i<rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if(null != chkbox && true == chkbox.checked) {
                //table.deleteRow(i);
                checkedrows.push(e.prop(chkbox.id));

            }


        }
        }catch(e) {
            alert(e);
        }
}

Answer 1

要获取已选中复选框的列表，您可以使用:

var checkedBoxes = document.querySelectorAll('input:checked');

但 IE 8 及更低版本不支持这一点，但您可以将 querySelectorAll 与类一起使用(见下文)。然后就可以根据返回的NodeList进行处理了。

给定简单的函数，从一个元素到具有提供的标签名称的父元素，其余的很简单:

// Starting from root, go up to an element with tagName
// and return it. Otherwise return undefined
function upTo(tagName, root) {
  if (!root) return;
  tagName = tagName.toLowerCase();
  while ((root = root.parentNode)) {
    if (root.tagName && root.tagName.toLowerCase() == tagName) {
       return root;
    }
  }
}    

然后你可以这样做:

function deleteRow(el) {
    var row = upTo('tr', el);
    if (row) row.parentNode.removeChild(row);
}

一些测试 HTML:

<table>
  <tr>
    <td><button onclick="deleteRow(this);">Delete row</button>
</table>

如果您想在每一行上有一个复选框，然后使用一个按钮删除所有选中的复选框，您可以执行以下操作:

function deleteRows() {
    var flags = document.querySelectorAll('.deleteRowFlag');
    for (var i=0, iLen=flags.length; i<iLen; i++) {
      if (flags[i].checked) {
        deleteRow(flags[i]);
      }
    }
}

并像这样使用它:

<table>
  <tr>
    <td><input type="checkbox" class="deleteRowFlag">
    <td>foo
  <tr>
    <td><input type="checkbox" class="deleteRowFlag">
    <td>bar
</table>

<button onclick="deleteRows();">Delete checked rows</button>