HTML，Javascript-如何删除在复选框中选中的表格的行

<!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>

上面是我制作的代码，其中表格的第一行是headings.from第二行，表中包含数据。我想删除它在复选框中选择该行，当我向前点击button.but上面的代码是不working.pls帮助HTML，Javascript-如何删除在复选框中选中的表格的行

来源

2013-04-22 Shikhar Deep

您不要选择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-22 11:34:16

谢谢阿里它的工作。谢谢很多人:) – 2013-04-22 12:09:43

使用jQuery你可以做一些与此类似：

在您的html文件的head部分添加此内容：

<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库。一旦DOM被完全加载，第二个脚本块将初始化具有类deleteBtn的元素的点击功能。你想把这个类加入到按钮中。

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

该脚本然后找到所有被检查的输入并删除其父母tr。您可能需要充分利用它才能完全适合您的情况。

来源

2013-04-22 11:07:22 chead23

到chead23：u能请告诉我在哪里，包括您的code.i刚开始学习HTML，CSS和javascript – 2013-04-22 11:24:15

我编辑就像你说的。我包括在头部分的脚本部分，并修改了“按钮”也。但它仍然不working.plus页面需要一些时间load.may是我做错了什么。你可以修改我的第一个代码，并在这里重新加入它。这将是非常有益的。谢谢你 – 2013-04-22 11:40:35

HTML，Javascript-如何删除在复选框中选中的表格的行

回答

相关问题