Question

我正在网站（Python + Flask）上开发一个管理面板，我在尝试实现选择全部切换时遇到了一个问题。

该表如下所示：

切换本身已经实现，但现在我想让它变得有用。

单击“SELECTED”按钮后，我希望能够删除每个选定的项目（标记），但我不能确定如何将其删除。

根据以下Python / HTML，点击 glyphicon-trash 可以单独删除每个标记：

<button onclick="deleteSelected('politician')">SELECTED</button>
{% for flag in flags %}
  <tr>
    <!-- Check box -->
    <td style="width: 60px;"><input type="checkbox" name="politician" value="bar1"></td>
    <!-- First Name -->
    <td class="col-title">{{flag.flagtitle}}</td>
    <!-- Last Name -->
    <td class="col-description">{{flag.flagreason}}</td>
    <!-- Details -->
    <td>
      <a href="/flag/{{ flag.idflag }}">
        <span class="glyphicon glyphicon-info-sign"></span>
      </a>
    </td>
    <!-- Edit icon -->
    <td class="list-buttons-column">
      <a href="/politician/{{ flag.politician }}">
        <span class="glyphicon glyphicon-pencil"></span>
      </a>
    </td>

    <!-- DELETE ITEM/FLAG -->
    <td class="col-delete">
      <form action ="/delete_flag/{{ flag.idflag }}" method="POST">
        <button onclick="return confirm('Are you sure you want to delete this flag?');">
          <span class="fa fa-trash glyphicon glyphicon-trash"></span>
        </button>
      </form>
    </td>

  </tr>
{% endfor %}

我的想法是开发一个JavaScript函数来删除所选内容，但我不确定如何获得flag.idFlag，这是标志'id'的关联。

我认为它看起来像这样：

function deleteSelected(elem) {
     checkboxes = document.getElementsByName(elem);
     for(var i=0, n=checkboxes.length;i<n;i++) {
       if (checkboxes[i].checked) {
             delete((checkboxes[i].getSelectedFlag).idFlag)
       }
     }
}

显然上面的代码不起作用，它只是想让你知道我在寻找什么。

有没有办法可以做到这一点？提前谢谢。

修改

好的，我明白了。考虑到我必须在action="/delete_flag/flag.idFlag"中提交多个表单，我在表中添加了一个列，其中可以看到标志的id。如下所示：

就此而言，我创建了一个JS函数来检索每一行（ID）的第一个值并将其存储在一个ID数组中，这样我就可以为每个行创建并提交一个表单。

对于数组的每个ID，我创建一个form.action = "/delete_flag/" + retrievedID的表单。见下面的代码。

function deleteRecords() {
    var arrayOfIDs;
    arrayOfIDs = $('#table-style').find('[type="checkbox"]:checked').map(function(){
            return $(this).closest('tr').find('td:nth-child(2)').text();
        }).get();   

        var delFlagForm = document.createElement("form");
        var action; 
        var formID;
        var submitFormStr;

        for (var i = 0; i < arr.length; i++) {
            action = "/delete_flag/" + arr[i];
            formID = 'form' + i;
            delFlagForm.setAttribute("id", formID);
            delFlagForm.setAttribute("method", "post");
            delFlagForm.setAttribute("action", action);

            delFlagForm.submit(); 
        }
}

这听起来不错，直到我意识到多个表单提交只能异步工作。 所以我做了以下更改，这就是我现在被困住的地方。表格根本不会提交，没有任何反应：

function deleteRecords() {
    var arraryOfIDs;
    arraryOfIDs = $('#table-style').find('[type="checkbox"]:checked').map(function(){
            return $(this).closest('tr').find('td:nth-child(2)').text();
        }).get();   

        var delFlagForm = document.createElement("form");
        var action; 
        var formID;
        var submitFormStr;

        for (var i = 0; i < arr.length; i++) {
            action = "/delete_flag/" + arr[i];
            formID = 'form' + i;
            delFlagForm.setAttribute("id", formID);
            delFlagForm.setAttribute("method", "post");
            delFlagForm.setAttribute("action", action);

            if (i != 0) submitFormStr += ' #' + formID;
            else submitFormStr = '#' + formID; 
        }
        $('submitFormStr').submit();
        return false;
}

循环中更新的变量submitFormStr存储了每个表单的id，如下所示：#form0 #form1因此我不明白为什么代码段$('submitFormStr').submit();相当于$('#form0 #form1').submit();不起作用。

我有什么问题吗？

Answer 1

好的，我明白了。考虑到我必须在action="/delete_flag/flag.idFlag"处提交多个表单，我在表格中添加了一列，其中可以看到该标志的ID。如下所示：

就此而言，我创建了一个JS函数来检索每一行（ID）的第一个值并将其存储在一个ID数组中，这样我就可以为每个行创建并提交一个表单。

对于数组的每个ID，我创建一个form.action = "/delete_flag/" + retrievedID的表单。见下面的代码。

function deleteRecords() {
    var arrayOfIDs;
    arrayOfIDs = $('#table-style').find('[type="checkbox"]:checked').map(function(){
            return $(this).closest('tr').find('td:nth-child(2)').text();
        }).get();   

        var delFlagForm = document.createElement("form");
        var action; 
        var formID;
        var submitFormStr;

        for (var i = 0; i < arr.length; i++) {
            action = "/delete_flag/" + arr[i];
            formID = 'form' + i;
            delFlagForm.setAttribute("id", formID);
            delFlagForm.setAttribute("method", "post");
            delFlagForm.setAttribute("action", action);

            delFlagForm.submit(); 
        }
}

这听起来不错，直到我意识到多个表单提交只能异步工作。 所以我做了以下更改，这就是我现在卡住的地方。表单根本没有提交，没有任何反应：

function deleteRecords() {
    var arraryOfIDs;
    arraryOfIDs = $('#table-style').find('[type="checkbox"]:checked').map(function(){
            return $(this).closest('tr').find('td:nth-child(2)').text();
        }).get();   

        var delFlagForm = document.createElement("form");
        var action; 
        var formID;
        var submitFormStr;

        for (var i = 0; i < arr.length; i++) {
            action = "/delete_flag/" + arr[i];
            formID = 'form' + i;
            delFlagForm.setAttribute("id", formID);
            delFlagForm.setAttribute("method", "post");
            delFlagForm.setAttribute("action", action);

            if (i != 0) submitFormStr += ' #' + formID;
            else submitFormStr = '#' + formID; 
        }
        $('submitFormStr').submit();
        return false;
}

循环中更新的变量submitFormStr存储了每个表单的ID，如下所示：#form0 #form1因此我不明白为什么这段代码{{1}相当于$('submitFormStr').submit();的}不起作用。

我有什么不对的吗？

如何启用切换所选项目的操作

1 个答案: