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);
}
}
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>
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')); }
}
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);
}
}
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>
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')); }
}
0 commentaires:
Enregistrer un commentaire