HTML,Javascript-how to delete the rows of a table which are selected in check box

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<html xmlns="" xml:lang="en" lang="en">
<head>
    <title>Ticket Forwarding</title>
</head>

<body style="background-image:url('bg.png')">
    <style type="text/css">
    table.imagetable {
        font-family: verdana,arial,sans-serif;
        font-size:11px;
        color:#333333;
        border-width: 1px;
        border-color: #999999;
        border-collapse: collapse;
    }

    table.imagetable th {
        background:#b5cfd2 url('cell-blue.jpg');
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #999999;
    }

    table.imagetable td {
        background:#dcddc0 url('cell-grey.jpg');
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #999999;
    }
    </style>

    <script language="javascript">
    function deleteRow(tableID) 
    {
        try
        { 
            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);
                    rowCount--;
                    i--;
                }
            }
        }
        catch(e){alert(e);}
    }
    </script>

    <img src="abstergo.jpg">
    <p style="color:#8A2BE2;font-family:Lucida Console;font-size:25px;background-    
image:url('cell-blue.jpg');margin:0px;width:1800px";> I.T.S->Forwarding & setting   
priorities for a ticket </p><br>

    <table class="imagetable"  id="datatable"  style="margin:20px 0px 0px 50px">
        <tr>
            <th>ID</th>
            <th>Subject</th>
            <th>Subtopic</th>
            <th>Message</th>
            <th>Severity</th>
            <th>Priority</th>
            <th>Status</th>
            <th>forward to</th>
            <th>checkbox</th>
        </tr>
        <tr>
            <td>1</td><td>login problem</td>         
            <td>
                <select name="helptopic">
                    <option value="accounts">accounts</option>
                    <option value="admin issues">admin issues</option>
                    <option value="it-support" selected>it-support</option>
                    <option value="project enquiry">project enquiry</option>
                    <option value="general enquiry">general enquiry</option>
                    <option value="tech. support">tech. support</option>
                    <option value="feedback">feedback</option>
                    <option value="others">others</option>
                </select>
            </td>
            <td>Unable to login</td>
            <td>
                <select name="severity">
                    <option>Minor</option>
                    <option>Normal</option>
                    <option>Major</option>
                    <option>Critical</option>
                </select>                
            </td>
            <td>
                <select name="priority">
                    <option>Low</option>
                    <option>Medium</option>
                    <option>High</option>
                </select>
            </td>
            <td>
                <select name="status">
                    <option>New</option>
                    <option>Assigned</option>
                    <option>Resolved</option>
                </select>
            </td>
            <td><input type="text" size="30"></td>
            <td><input type="checkbox" name="chk"/></td>
        </tr>
    </table>
    <input type="button" value="Forward" onclick="deleteRow('datatable')" />
</body>
</html>

above is the code which i made.here the first row of the table is headings.from second row onwards the table contains data.i want to delete the row which is selected in check box and when i click on forward button.but the above code is not working.pls help

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Ticket Forwarding</title>
</head>

<body style="background-image:url('bg.png')">
    <style type="text/css">
    table.imagetable {
        font-family: verdana,arial,sans-serif;
        font-size:11px;
        color:#333333;
        border-width: 1px;
        border-color: #999999;
        border-collapse: collapse;
    }

    table.imagetable th {
        background:#b5cfd2 url('cell-blue.jpg');
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #999999;
    }

    table.imagetable td {
        background:#dcddc0 url('cell-grey.jpg');
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #999999;
    }
    </style>

    <script language="javascript">
    function deleteRow(tableID) 
    {
        try
        { 
            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);
                    rowCount--;
                    i--;
                }
            }
        }
        catch(e){alert(e);}
    }
    </script>

    <img src="abstergo.jpg">
    <p style="color:#8A2BE2;font-family:Lucida Console;font-size:25px;background-    
image:url('cell-blue.jpg');margin:0px;width:1800px";> I.T.S->Forwarding & setting   
priorities for a ticket </p><br>

    <table class="imagetable"  id="datatable"  style="margin:20px 0px 0px 50px">
        <tr>
            <th>ID</th>
            <th>Subject</th>
            <th>Subtopic</th>
            <th>Message</th>
            <th>Severity</th>
            <th>Priority</th>
            <th>Status</th>
            <th>forward to</th>
            <th>checkbox</th>
        </tr>
        <tr>
            <td>1</td><td>login problem</td>         
            <td>
                <select name="helptopic">
                    <option value="accounts">accounts</option>
                    <option value="admin issues">admin issues</option>
                    <option value="it-support" selected>it-support</option>
                    <option value="project enquiry">project enquiry</option>
                    <option value="general enquiry">general enquiry</option>
                    <option value="tech. support">tech. support</option>
                    <option value="feedback">feedback</option>
                    <option value="others">others</option>
                </select>
            </td>
            <td>Unable to login</td>
            <td>
                <select name="severity">
                    <option>Minor</option>
                    <option>Normal</option>
                    <option>Major</option>
                    <option>Critical</option>
                </select>                
            </td>
            <td>
                <select name="priority">
                    <option>Low</option>
                    <option>Medium</option>
                    <option>High</option>
                </select>
            </td>
            <td>
                <select name="status">
                    <option>New</option>
                    <option>Assigned</option>
                    <option>Resolved</option>
                </select>
            </td>
            <td><input type="text" size="30"></td>
            <td><input type="checkbox" name="chk"/></td>
        </tr>
    </table>
    <input type="button" value="Forward" onclick="deleteRow('datatable')" />
</body>
</html>

Share Improve this question edited Apr 22, 2013 at 11:53 Panos Bariamis 4,6617 gold badges39 silver badges62 bronze badges asked Apr 22, 2013 at 10:59 Shikhar Deep 2522 gold badges8 silver badges19 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 1

You don't select the checkbox inside td so try this, and this jsfiddle :

function deleteRow(tableID)  {
        var table = document.getElementById(tableID).tBodies[0];
        var rowCount = table.rows.length;

        // var i=1 to start after header
        for(var i=1; i<rowCount; i++) {
            var row = table.rows[i];
            // index of td contain checkbox is 8
            var chkbox = row.cells[8].getElementsByTagName('input')[0];
            if('checkbox' == chkbox.type && true == chkbox.checked) {
                table.deleteRow(i);
             }
        }
}

Using JQuery you could do something similar to this:

In the head section of your html file add this:

<script type="text/javascript" src="//ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.deleteBtn').click(function(){
           $('input:checked').each(function(){
               $(this).parent('tr').remove();
           });
        });
    });
</script>

The first script reference links to the JQuery library on-line. The second script block initialises a click function on the element with the class deleteBtn once the DOM is fully loaded. You want to add this class to the button.

<input type='button' value='Forward' class='deleteBtn' />

The script then finds all inputs that are checked and remove their parent tr. You may need to play around with it to get it working exactly for your scenario.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

HTML,Javascript-how to delete the rows of a table which are selected in check box - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)