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>

Answer 2

您可以执行AJAX请求以从数据库中删除该行，并在请求成功时从页面中删除相关行。

我建议使用jQuery并为每一行分配一个唯一的id（对应于数据库中的ID字段）

假设您的复选框有一个共同的类：

var checkedMessages = [];
$('checkboxCls').each(function(e) {
   if(e.prop('checked')) { checkedMessages.push(e.prop('id')); }
}

动态删除表中的行

2 个答案: