开发者

Delete one row in html table marqued by a check box with javascript

开发者 https://www.devze.com 2022-12-29 05:58 出处:网络
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>\");

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();
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号