0 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/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>

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

4

2 回答 2

1

您没有选择 td 内的复选框，所以试试这个，这个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);
             }
        }
}
于 2013-04-22T11:34:16.240 回答
0

使用 JQuery 你可以做类似这样的事情：

在head您的 html 文件部分中添加以下内容：

<script type="text/javascript" src="//ajax.googleapis.com/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>

第一个脚本参考链接到在线 JQuery 库。deleteBtn一旦 DOM 完全加载，第二个脚本块使用类初始化元素上的 click 函数。您想将此类添加到按钮。

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

然后，该脚本会查找所有已检查的输入并删除其 parent tr。您可能需要使用它才能使其完全适合您的场景。

于 2013-04-22T11:07:22.787 回答