CODEWITHSUNDEEP
javajavascriptajaxjsp
user3462609
user3462609

Reputation: 105

Deleting rows in a table dynamically

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

Upvotes: 0

Views: 1317

Answers (2)

RobG
RobG

Reputation: 147403

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>

Upvotes: 1

ioseph
ioseph

Reputation: 1917

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

Upvotes: 0

Related Questions