如何使用Javascript删除基于复选框列的html表的选定行

Question

我制作了一个简单的 html 表格，其中包含一列复选框以及其他一些列。在此之上，是一个删除按钮，它将调用我已经创建的服务功能，但我希望它删除该列具有的每个复选框。如何向我的删除函数发送一组已检查的“项目”？

下面是删除按钮代码：

<div class="panel-body">
    <button class="btn pull-right btn-danger button-project-request form-group" value="Submit" ng-click=deleteCheckedProjects()>Delete</button>
</div>

下表代码如下：

    <tbody>
        <tr ng-repeat="project in projects">
            <td><input type="checkbox" name="checkbox" value="project"/></td>
            <td ng-click=editRequestModule(project)>{{project.project.projNm}}</td>
            <td>{{convertMilliseconds(project.project.strtDt)}}</td>
            <td>{{convertMilliseconds(project.project.endDt)}}</td>
            <td>{{project.project.statusId.staDescription}}</td>
        </tr>
    </tbody>

关于如何解决这个问题的任何建议？也许在 Javascript 中，建立一个包含所有复选框的双向有界数组？

Answer 1

我认为最简单的实现是用单独的删除按钮替换您的复选框：

<tr ng-repeat="proj in projects">
    <td><button ng-click="remove(proj)">delete</button><td>
    <td>{{proj.name}}</td>
    <!-- ... -->
</tr>

remove 的意思是：

$scope.remove = function(proj){
    $scope.projects.splice($scope.projects.indexOf(proj), 1);
}

---

如果您设置了复选框，则可以在项目模型中包含某种“暂存删除”标志：

<tr ng-repeat="proj in projects">
    <td><input type="checkbox" ng-model="proj.will_delete"></td>
    <td>{{proj.name}}</td>
    <!-- ... -->
</tr>
<button ng-click="remove_staged()">delete</button>

remove_staged 类似于：

$scope.remove_staged = function(){
    $scope.projects = $scope.projects.filter(proj=> !proj.will_delete);
}

Answer 2

您可以为每个复选框添加一个“项目复选框”类，然后使用

var checkboxes=document.getElementsByClassName('project-checkbox');

获取每个复选框。 从那里您可以创建一个空数组，循环遍历checkboxes 数组，并在将其添加到新数组之前检查它是否已被检查。

var checkboxes=document.getElementsByClassname('project-checkbox');
var checkedProjects=[];
for(var i=0;i<checkboxes.length;i++){
  if (checkboxes[i].checked) {
    checkedProjects.append(checkboxes[i]);  
  }
}

现在checkedProjects 已选中每个复选框，您可以通过checkedProjects[i].parentNode 访问它所在的项目

一种更有效的方法是在选中或未选中时更改类名，然后使用document.getElementsByClassName() 仅获取选中的类名。

Answer 3

这是我将如何使用 JS (JQuery) 来实现的

添加到您要跟踪课程.myCheckboxClass的每个复选框

var deleteCheckedProjects = function() {

    // this will return all checked checkboxes with class .myCheckboxClass
    var checked = $('.myCheckboxClass:checkbox:checked') 
  
    // you can delete the input in the DOM
    for (i = 0; i < checked.length; i++) {
    
       checked[i].remove();
    
    }
    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input class="myCheckboxClass" type="checkbox" name="first">Hello Sir!<br>
<input class="myCheckboxClass" type="checkbox" name="first">I am not here</input><br>

<br>

<button onclick="deleteCheckedProjects()" type="button">Click Me!</button>

或者你可以只返回数组：

var deleteCheckedProjects = function() {

  // this will return all checked checkboxes with class .myCheckboxClass
  return $('.myCheckboxClass:checkbox:checked') 

}