如何使用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

您可以在每个复选框中添加一个“ project-checkbox”类，然后使用

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选中，您可以通过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') 

}