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-如何刪除在複選框中選中的表格的行

回答

相關問題