动态删除表中的行

Question

I am making a mail web application .So while showing all inbox messages at top i am having a image button to delete all those items that are checked in corresponding checkboxes of rows of my mail table.

My image for delete is :

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

And for each row the row fetches data from database and is something like this :

<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>

Now how to remove the rows dynamically from my rows and at the same time from the database too.Please help

EDIT :

I was trying to put all checked rows checkboxes ids in an array.Whats wrong with this ?

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

To get a list of checked checkboxes, you can use:

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

but IE 8 and lower don't support that, but you can use querySelectorAll with a class (see below). You can then do processing based on the returned NodeList.

Given simple function that goes from an element up to a parent with a provided tag name, the rest is easy:

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

You can then do:

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

Some test HTML:

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

If you want to have a checkbox on each row and then use a single button to delete all the checked ones, you can do something like:

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

And use it like:

<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

You can perform an AJAX request to delete the row from database, and when the request succeeds delete the row in question from the page.

I'd recommend jQuery and assigning a unique id to each row (corresponding to the ID field in your database)

Assuming your checkboxes have a common class:

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