웹 사이트 (Python + Flask)에서 관리자 패널을 개발 중이며 모두 선택 토글을 구현하는 동안 문제가 발생했습니다.선택한 항목을 토글 할 때 동작을 활성화하는 방법
표는 다음과 같습니다 :
자체가 구현 된 토글하지만 지금은 유용 만들고 싶어.
'SELECTED'버튼을 클릭하면 선택한 모든 항목 (깃발)을 삭제할 수 있기를 원하지만 나는 그걸 어떻게 풀 수 있는지 확실하지 않습니다.
각각의 플래그가 개별적으로 glyphicon - 쓰레기 다음 파이썬/HTML에 따라 클릭하여 삭제할 수 있습니다 :
<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 %}
내 생각은 선택한 내용을 삭제하려면 자바 스크립트 기능을 개발했지만, 난 ' 확실하지 않아요. 어떻게하면 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를 볼 수있는 테이블에 열을 추가했습니다. 다음과 같은 그 문제
, I는 I 만들고 폼을 송신 할 수 있도록, 각 행 (ID)의 제 1 값을 검색하고 ID 배열에 저장하는 JS 함수를 만들어 그들 각각을 위해.
배열의 각 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 것은 그래서 이런 이유로 내가 왜 조각을 이해하지 못하는 $('#form0 #form1').submit();에 해당하는 코드 $('submitFormStr').submit();이 작동하지 않습니다.
내가 잘못하고있는 것이 있습니까?