[英]Get All checkbox value selected , Table row wise using AJAX : DJANGO
我有代码应该 select 选中复选框的表中的所有行。 所以首先我将描述我的表结构。
所以这里会有很多行,所以我应该 select 我需要哪个服务器以及我应该执行哪个操作。 因此,如果我有两个服务器 ABC 和 BCD,如果我想为 ABC 执行启动操作,为 ABC 执行停止操作,我应该 select 来自第一个复选框的各个服务器,并从与服务器名称在同一行的复选框中进行相关操作。 我应该将所有值逐行传递给views.py以执行其他操作。
所以目前我写了一个代码,即使我没有选中复选框,它也会给我价值。 而且我无法弄清楚问题。 任何人都可以帮助我。
这是我的 AJAX 电话:
$("[name=ButtonSubmit]").click(function(){
var myarrayServer = [];
var myarrayStart = [];
var myarrayRestart = [];
var myarrayStop =[];
var message = " ";
$(".form-check-input0:checked").each(function() {
var row = $(this).closest("tr")[0];
message += row.cells[1].innerHTML;
message += " " + row.cells[2].innerHTML;
message += " " + row.cells[3].innerHTML;
message += " " + row.cells[4].innerHTML;
var checkedValue = $('#flexSwitchCheckDefaultStart:checked').val();
message += " "+checkedValue;
var checkedValue2 = $('#flexSwitchCheckDefaultRestart:checked').val();
message += " "+checkedValue2;
// if (row.cells[5].children()[0].is(':checked')) {
// message += " " + row.cells[5].children[0].value;
// }
message += "\n";
alert(message);
var formdataD = new FormData();
formdataD.append('myarrayServer', message);
$.ajax({
url: "secondtableonDashboard", //replace with you url
method: 'POST',
data: formdataD,
datatype:'json',
processData: false,
contentType: false,
success: function(data) {
// alert("message: " + data.message);
},
error: function(error) {
// alert('error..'+error);
}
});
});
});
这是 HTML:
<tbody id="myTable">
{% for item in objs %}
<tr>
<td>
<div class="form-check form-switch">
<input class="form-check-input0" name="Services1" value="{{item.Component}}" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label0" for="flexSwitchCheckDefault">
</div>
</td>
<td>{{item.ServerName}}</td>
<td>{{item.Component}}</td>
<td>{{item.PID}}</td>
<td>
{{item.State}}</td>
<td id="hideInnerHTML">
<input class="form-check-input1" name="Start" value="START" type="checkbox" id="flexSwitchCheckDefaultStart">
<!-- <label class="form-check-label1 services" for="flexSwitchCheckDefault"> -->
Start
</td>
<td id="hideInnerHTML">
<input class="form-check-input2" name="Restart" value="RESTART" type="checkbox" id="flexSwitchCheckDefaultRestart">
<!-- <label class="form-check-label2 services" for="flexSwitchCheckDefault"> -->
</td>
<td id="hideInnerHTML">
<input class="form-check-input3" name="Stop" value="STOP" type="checkbox" id="flexSwitchCheckDefault">
<!-- <label class="form-check-labe3l services" for="flexSwitchCheckDefault"> -->
</td>
</tr>
{% endfor %}
</form>
</tbody>
首先,在您的代码中,您使用了具有相同名称的多个 id,因此只需将其删除或仅使用class 。然后,每当单击ButtonSubmit
时,首先获取servername
并将其值推送到内部数组中。 现在,要在同一行中获取其他复选框值,您可以使用.closest("tr").find("input[type=checkbox]:checked:not(:first)")
并将选中的复选框值推送到内部数组中,最后将此内部数组值放入外部 arrays 并将其传递给 ajax。
演示代码:
$("[name=ButtonSubmit]").click(function() { console.clear() var myarrayServer = []; $(".form-check-input0:checked").each(function() { var opeartions = [] //for inner array var row = $(this).closest("tr"); //get servername var server_name = row.find("td:eq(1)").text().trim(); opeartions.push(server_name) //push in array //get checkboxes which is checked in same row row.find("input[type=checkbox]:checked:not(:first)").each(function() { opeartions.push($(this).val()) }) myarrayServer.push(opeartions) //push values in main array }); console.log(myarrayServer); var formdataD = new FormData(); formdataD.append('myarrayServer', myarrayServer); //here ajax call });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table border="1"> <thead> <th></th> <th>Servername</th> <th>Component</th> <th>PID</th> <th>State</th> <th>Start</th> <th>Restart</th> <th>Stop</th> </thead> <tbody id="myTable"> <tr> <td> <div class="form-check form-switch"> <input class="form-check-input0" name="Services1" value="A" type="checkbox" id="flexSwitchCheckDefault"> <label class="form-check-label0" for="flexSwitchCheckDefault"></label> </div> </td> <td>A</td> <td>Somethings</td> <td>1</td> <td> Running</td> <td> <input class="form-check-input1" name="Start" value="START" type="checkbox"> </td> <td> <input class="form-check-input2" name="Restart" value="RESTART" type="checkbox"> </td> <td> <input class="form-check-input3" name="Stop" value="STOP" type="checkbox"> </td> </tr> <tr> <td> <div class="form-check form-switch"> <input class="form-check-input0" name="Services1" value="A" type="checkbox"> <label class="form-check-label0" for="flexSwitchCheckDefault"></label> </div> </td> <td>B</td> <td>Somethings</td> <td>2</td> <td> Running</td> <td> <input class="form-check-input1" name="Start" value="START" type="checkbox"> </td> <td> <input class="form-check-input2" name="Restart" value="RESTART" type="checkbox"> </td> <td> <input class="form-check-input3" name="Stop" value="STOP" type="checkbox"> </td> </tr> </form> </tbody> </table> <button name="ButtonSubmit">Send</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.