删除使用一个按钮检查的表格行

正如标题所暗示的，我已经创建了一个表格，里面填充了一个列表，并且我还在该表格的每个元素旁边都有一个复选框。最后我有一个标签为Delete的按钮。我想用该实际删除操作附加该按钮。删除使用一个按钮检查的表格行

按钮（它是另一个表内）的代码：

<tr id="deleteproject" > 
         <td width="180" align="center" background="ButtonBackground.png" 
onclick = "deleteRow('plist')"> 
          <style="text-decoration:none; display:block; width:100%; 

height:100%"> 
           <font size="0.5px"><br/></font> 
           <font id="DeleteProject" face="verdana" color="white"> 
DELETE</font> 
          </a> 
         </td> 
</tr>

表：在JS

<table ID="plist" border="0" cellpadding="0" cellspacing="0" datasrc="#clicklist" 
         style="WIDTH: 380px"> 
         <tr> 
          <td id="projline" width="100%" align="left" valign="middle" 
style="margin-left: 16px;"> 
           <input type="checkbox" name="AAA"/> 
           <font size="3" face="Arial"> 
            <a id="proj" href="urn:a"> 
             <span datafld="Name" 

style="margin-left: 20px; line-height: 26px;"></span> 
            </a> 
           </font> 
          </td> 
         </tr> 
        </table>

rowDelete功能：

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); 
     } 
    }

当我选择复选框从一行并按下删除按钮，我得到一个对象错误，我认为这意味着某些东西是空的或者不能理解的JS代码。

来源

2016-03-01 Iason

在这一行'如果（行== currentRow.parentNode.parentNode）{'currentRow没有定义或在此之前分配一个值。你想用这条线完成什么？ –

该功能的代码不正确。它现在更新我的原始问题。不过，我得到了同样的错误。 – Iason

找到了。解决方案可能会对你有所帮助，但这会有很长的路要走。 http://weblogs.asp.net/stevewellens/jquery-selector-tester-and-cheat-sheet – Ravi

您必须先创建一个合适的表格。该表格在HTML5和HTML4中无效，该按钮需要位于表格内。请阅读article。

当我从一行中选择一个复选框并按下删除按钮时，我得到一个对象错误，我认为这意味着某些东西在JS代码中为空或者无法理解。

我不知道从哪里开始......看JS，你正在试图由TableRow Object?或ChildNode?无论哪种方式引用它们的目标行，您收到的含糊不清的错误消息是因为你必须引用DOM中的元素作为对象。有几种方法在你的情况的话，例如：

的tr需要由它们是什么引用：<tr>标签名称。
- var All_TR_Tags = document.getElementsByTagName('tr');
- 现在All_TR_Tags是array-likeobject

请查看演示和提问，因为我不能做的什么是错的列表和哪些问题需要解决，因为这需要几个小时。演示的样式不是主题的一部分，我只是使用它，因为它是我用于表格的默认样式。虽然JS的表格结构和JS一样重要。来源本身已被广泛注释。请不要犹豫，问你是否还有其他问题。

片段

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>delRows</title> 
 
    <style> 
 
    .x th { 
 
     color: #FFF; 
 
     background: #2C7EDB; 
 
     padding: 10px; 
 
     text-align: center; 
 
     vertical-align: middle; 
 
    } 
 
    .x tr:nth-child(odd) { 
 
     background-color: #333; 
 
     color: #FFF; 
 
    } 
 
    .x tr:nth-child(even) { 
 
     background-color: #D3E9FF; 
 
     color: #333; 
 
    } 
 
    .x td { 
 
     border-style: solid; 
 
     border-width: 1px; 
 
     border-color: #264D73; 
 
     padding: 5px; 
 
     text-align: left; 
 
     vertical-align: top; 
 
     position: relative; 
 
    } 
 
    .x thead th:first-child { 
 
     border-top-left-radius: 6px; 
 
    } 
 
    .x thead th:last-child { 
 
     border-top-right-radius: 6px; 
 
    } 
 
    .x tbody tr:last-child th:first-child { 
 
     border-bottom-left-radius: 6px; 
 
    } 
 
    .x tbody tr:last-child td:last-child { 
 
     border-bottom-right-radius: 6px; 
 
    } 
 
    th { 
 
     width: 30%; 
 
    } 
 
    th:first-of-type { 
 
     width: 10%; 
 
    } 
 
    table { 
 
     width: 80%; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <table id="T1" class="x"> 
 
    <thead> 
 
     <tr> 
 
     <th> 
 
      <input id="btn1" type="button" value="DelRows" onclick="delRows('T1')")/> 
 
     </th> 
 
     <th>A</th> 
 
     <th>B</th> 
 
     <th>C</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr id="row1"> 
 
     <td> 
 
      <input id="chx1" type="checkbox" /> 
 
     </td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     </tr> 
 
     <tr id="row2"> 
 
     <td> 
 
      <input id="chx2" type="checkbox" /> 
 
     </td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     </tr> 
 
     <tr id="row3"> 
 
     <td> 
 
      <input id="chx3" type="checkbox" /> 
 
     </td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     </tr> 
 
     <tr id="row4"> 
 
     <td> 
 
      <input id="chx4" type="checkbox" /> 
 
     </td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     </tr> 
 
     <tr id="row5"> 
 
     <td> 
 
      <input id="chx5" type="checkbox" /> 
 
     </td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     </tr> 
 
     <tr id="row6"> 
 
     <td> 
 
      <input id="chx6" type="checkbox" /> 
 
     </td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     </tr> 
 
     <tr id="row7"> 
 
     <td> 
 
      <input id="chx7" type="checkbox" /> 
 
     </td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     </tr> 
 
     <tr id="row8"> 
 
     <td> 
 
      <input id="chx8" type="checkbox" /> 
 
     </td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     </tr> 
 
     <tr id="row9"> 
 
     <td> 
 
      <input id="chx9" type="checkbox" /> 
 
     </td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     </tr> 
 
     <tr id="row10"> 
 
     <td> 
 
      <input id="chx10" type="checkbox" /> 
 
     </td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
    <script> 
 
    function delRows(tableID) { 
 
     
 
    //1| Take the function's argument and reference it as an id. 
 
     var table = document.getElementById(tableID); 
 

 
    //2| getElementsByTagName()[0]¹ will find the first† element with the <tbody> tag. 
 
    /* †You can use [0] to specify the first tag, [1] for the second tag, etc. <tbody> is the direct parent of all <tr>, so that's why we want a reference to it */ 
 
     var tb = table.getElementsByTagName('tbody')[0]; 
 

 
    //3| Collect all checkboxes that are checked into a NodeList² named 'checked'. 
 
/* querySelectorAll³ is like getElementBy* on steroids. It accepts a selector as a target to reference, the syntax is like CSS or inside a jQuery object $(selector). Notice the ":checked"⁴ pseudoselector */ 
 
     var checked = document.querySelectorAll('input[type="checkbox"]:checked'); 
 
\t \t \t \t 
 
//4| Collect all <tr> in <tbody> into a NodeList named 'rows'. 
 
/* Remember we referenced the <tbody> as var tb on step 2? */ 
 
     var rows = tb.querySelectorAll('tr'); 
 
\t \t \t \t 
 
//5| Iterate through the checked NodeList from step 3. 
 
/* When dealing with arrays and array-like objects, you'll need to use a 'for loop' to iterate (or loop)⁵ 90% of the time. */ 
 
     for (var i = 0; i < checked.length; i++) { 
 
\t \t \t \t \t 
 
//6| For every checked checkbox find it's parent's parent and name it 'row'. 
 
/* In the checked NodeList, there are all of the checked checkboxes so on each loop we are finding that particular checkbox's "grandmother". Example: 
 
i = 4 means we are on the 3rd iteration (loop). 
 
checked[4] is the third checked checkbox. 
 
.parentNode⁶ is the parent element of the third checked checkbox--a <td> 
 
The second .parentNode is the parent of the <td> which is a <tr> */ 
 
     var row = checked[i].parentNode.parentNode; 
 
\t \t \t \t 
 
//7| Remove 'row' from <tbody> 
 
/* removeChild⁷ needs the parent of the element (or node) that you intend to remove. Thinking ahead, we have the parent of all <tr>: tb (a.k.a. <tbody>) from step 2. */ 
 
     tb.removeChild(row); 
 
//8| At this point, i is i+1 we go back to step 5 as long as "i < checked.length". 
 
/* var i = one loop of steps 6, 7, and 8. It started initially as 0 which by design coincides with the 0 count index of arrays and array-like objects like the NodeList checked. i is then incremented by 1 (i++) thereby completing the loop. As long as i is less than the total amount of checked checkboxes, it will continue looping. */ 
 
     } 
 
//9| At this point, i is greater than the total amount of checked checkboxes and stops looping thru steps 6, 7, and 8. 
 
/* This is the end of the function. Sometimes you'll see "return false;", but we didn't need it because the click event that starts this function is just a button. If we kept the original markup, that used an anchor, then "return false" would be necessary because an anchor by default will jump to a location which is undesirable if you are using the anchor as a button instead. */ 
 
    } 
 
    </script> 
 
</body> 
 

 
</html>

来源

2016-03-01 16:58:33 zer00ne

删除使用一个按钮检查的表格行

回答

相关问题