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

}