Delete one row in html table marqued by a check box with javascript
I build dynamically my HTML table from database like that:
for (i = 0; i < nomCols.length; i++) {
retour.append(("<td bgcolor=#0066CC>") + nomCols[i] + "</td>");
}
retour.append("</tr>");
retour.append("<tr>");
try {
s = HibernateUtil.currentSession();
tx = s.beginTransaction();
Query query = s.createQuery(HQL_QUERY);
for (Iterator it = query.iterate(); it.hasNext();) {
if (it.hasNext()) {
Dailytimesheet object = (Dailytimesheet) it.next();
retour.append("<td><input type=checkbox name=cb id=cb /> </td>");
retour.append("<td>" + object.getTrackingDate() + "</td>");
retour.append("<td>" + object.getActivity() + "</td>");
retour.append("<td>" + object.getProjectCode() + "</td>");
retour.append("<td>" + object.getWAName() + "</td>");
retour.append("<td>" + object.getTaskCode() + "</td>");
retour.append("<td>" + object.getTimeSpent() + "</td>");
retour.append("<td>" + object.getPercentTaskComplete() + "</td>");
}
retour.append("</tr>");
}
retour.append("</table>");
tx.commit();
} catch (HibernateException e) {
retour.append("</table><H1>ERREUR:</H1>" + e.getMessage());
e.printStackTrace();
}
return retour;
}
so I want that all check boxes having the same id. When trying to delete one row in my table witch have the check box checked i found a problem with that. Iam using simple javascript like this:
f开发者_如何学Cunction DeleteARow() {
//var Rows = document.getElementById('sheet').getElementsByTagName('tr');
//var RowsCount = Rows.length;
//alert('Your table has ' + RowsCount + ' rows.');
if (document.getElementById('cb').checked == true) {
document.getElementById('cb').parentNode('td').parentNode('tr').remove();
}
}
It doesn't work approperly and only the first row have the id 'cb'.
Many thanks for your help.
The point of ID
is that there can be only one. You cannot have multiple elements that have the same ID
.
getElementByID
will only return the first element that has the ID.
I recommend you instead use CSS classes.
Here is a way you can loop through checkboxes who have class="cb"
:
var j, elements = document.getElementsByTagName("INPUT");
for (j = 0;j < elements.length;j += 1) {
if (elements[j].className === 'cb' && elements[j].checked === true) {
// elements[j] is your checkbox
}
}
If you want to take the time to learn something like jQuery, you can make this entire task easier:
$('.cb:checked').parent().parent().remove();
edit:
$('.cb:checked').closest('tr').remove();
精彩评论