jquery - 获取 td 文本并使用 jQuery 将其发送到控制器
问题描述
我想td
从table
. 该表有一个复选框,我的目标是获取这些值并将它们发送到控制器以进行全部插入。
<table class="table table-bordered" id="mytable">
<tr>
<th>Archive</th>
<th><input type="checkbox" id="check_all"></th>
<th>S.No.</th>
<th>matricule</th>
<th>nom & prenom</th>
<th>salaire net</th>
<th>nbre de jour </th>
<th>prime</th>
</tr>
@if($salaries->count()) @foreach($salaries as $key => $salarie)
<tr id="tr_{{$salarie->id}}">
<td>archive</td>
<td><input type="checkbox" class="checkbox" data-id="{{$salarie->id}}"></td>
<td>{{ ++$key }}</td>
<td>{{ $salarie->matricule }}</td>
<td>{{ $salarie->nom }} {{ $salarie->prenom }}</td>
<td>{{ $salarie->salairenet }}</td>
<td><input type="text" name="nbreJ" class="form-control" value="{{$data['nbr']}}"></td>
<td><input type="text" name="prime" class="form-control" value="0"></td>
</tr>
@endforeach @endif
</table>
$(document).ready(function() {
$('#check_all').on('click', function(e) {
if ($(this).is(':checked', true)) {
$(".checkbox").prop('checked', true);
} else {
$(".checkbox").prop('checked', false);
}
});
$('.checkbox').on('click', function() {
if ($('.checkbox:checked').length == $('.checkbox').length) {
$('#check_all').prop('checked', true);
} else {
$('#check_all').prop('checked', false);
}
});
$('.add-all').on('click', function(e) {
var idsArr = [];
$(".checkbox:checked").each(function() {
idsArr.push($(this).attr('data-id'));
});
if (idsArr.length <= 0) {
alert("Please select atleast one record to update.");
} else {
alert(idsArr);
}
});
});
解决方案
我给了价值一个类。然后我得到所有检查的输入。然后我得到具有该给定类的兄弟 td 。得到这个值,最后求和。
$('.table').on('click', function() {
// Get all checked boxes
var allChecked = $('.checkbox:checked');
// Prepare the result
var allValues = [];
var allNames = [];
// Loop every checkbox
for (var i = 0; i < allChecked.length; i++) {
// Get the siblings td with class 'salaireValue'
var currentValue = $(allChecked[i]).parent().siblings('.salaireValue')[0];
var currentName = $(allChecked[i]).parent().siblings('.name')[0];
// Push to arrays
allValues.push(parseInt($(currentValue)[0].innerText))
allNames.push($(currentName)[0].innerText)
}
console.log(allValues);
console.log(allNames);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered" id="mytable">
<tr>
<th>Value</th>
<th>Checkbox</th>
</tr>
<tr>
<td class="salaireValue">1</td>
<td class="name">John</td>
<td><input type="checkbox" class="checkbox"></td>
</tr>
<tr>
<td class="salaireValue">2</td>
<td class="name">Louise</td>
<td><input type="checkbox" class="checkbox"></td>
</tr>
<tr>
<td class="salaireValue">5</td>
<td class="name">Frank</td>
<td><input type="checkbox" class="checkbox"></td>
</tr>
</table>
推荐阅读
- java - REST API 的幂等性
- css - CSS动画问题
- python - 从现有 Torchvision 数据集创建精简数据集
- python - PyMC3 分层二项式模型 - 调整后的分歧
- encoding - 使用 exiftool 编写 UTF8 编码的 IPTC 标签
- spring-boot - Spring Boot - 使用 H2 进行单元测试和快速开发(使用 Spring 配置文件)
- batch-file - 将文件编译成一个自解压安装程序
- java - 我不明白为什么会收到 ArrayIndexOutOfBoundsException?
- java - 将空格分隔的整数字符串解析为过滤的整数数组
- c# - 如何使用 Unity 一次性注入两个实现?