Jquery比较用复选框选择的表行并比较列
Posted
技术标签:
【中文标题】Jquery比较用复选框选择的表行并比较列【英文标题】：Jquery Compare table rows selected with checkbox and compare a column 【发布时间】：2020-05-17 12:49:28 【问题描述】：我有一个表，我使用复选框比较行值以查看它们是否相同，我正在使用 jquery 代码来比较由复选框选择的表行，它工作得很好，现在我想要的是能够从比较中排除两列并比较两个选定行中的其他列
$('.ApprovalForm').submit(function(event)
event.preventDefault(); // Prevent the form from submitting via the browser
if ($(":checkbox:checked").length < 2 || $(":checkbox:checked").length > 2)
alert('You have to select two flights');
else
var form = $(this);
//get all checkboxes that are selected
var selected = $("input:checked");
//loop through your columns
var x = 0;
for (var i = 1; i <= 17; i++)
var prev = null;
$.each($(selected), function()
var curr = $(this).closest("tr").find("td").eq(i).text();
//if at least one value is different highlight the column
if (curr !== prev && prev !== null)
x++;
console.log(3333);
prev = curr;
)
console.log(x);
if (x <= 0)
$("#modal-Approve").modal('show');
$.ajax(
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize(),
).done(function(response)
$("#MessageStatus ").val(response);
location.reload();
).fail(function(data)
// Optionally alert the user of an error here...
alert(data);
);
else
alert('Selected flights are not the same, check if they are the same by using detail button');
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th style="display:none">id</th>
<th>Mission</th>
<th>First Pilot</th>
<th>Second Pilot</th>
<th>Aircraft</th>
<th>No</th>
<th style="display:none">TakeOffTime</th>
<th style="display:none">LandingTime</th>
<th style="display:none">Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>test Flying</td>
<td>Juliet</td>
<td>Pascal</td>
<td>boeing 42</td>
<td>255</td>
<td>12:45</td>
<td>14:20</td> <!-- exclude this from the values that will be compared -->
<td>12/1/2020</td> <!-- exclude this too -->
<td> <input type="checkbox" name="FlightId[]"> </td>
</tr>
<tr>
<td>test Flying</td>
<td>Juliet</td>
<td>Pascal</td>
<td>boeing 42</td>
<td>255</td>
<td>12:45</td>
<td>14:30</td> <!-- exclude this from the values that will be compared -->
<td>12/2/2020</td> <!-- exclude this too -->
<td> <input type="checkbox" name="FlightId[]"> </td>
</tr>
</tbody>
</table>所以我们的想法是能够从比较中排除一些 td 值
【问题讨论】：
【参考方案1】： 将“exc_toggle”类添加到标题行中的每个th 添加事件侦听器以单击这些类以切换“排除”数据属性 为 tbody 中的每一行添加一个隐藏单元格，以便标题和 tbody 行之间的列数相同 添加到您的表单提交事件侦听器以迭代“exc_toggle”类并为每个数据排除 = 1 创建一个 to_ignore 索引 在忽略索引中找到 i 时跳过比较代码如下。
html：
<table>
<thead>
<tr id="header_row">
<th style="display:none" class="exc_toggle">id</th>
<th class="exc_toggle">Mission</th>
<th class="exc_toggle">First Pilot</th>
<th class="exc_toggle">Second Pilot</th>
<th class="exc_toggle">Aircraft</th>
<th class="exc_toggle">No</th>
<th class="exc_toggle">TakeOffTime</th>
<th class="exc_toggle">LandingTime</th>
<th class="exc_toggle">Date</th>
</tr>
</thead>
<tbody>
<tr>
<td style="display:none"></td>
<td>test Flying</td>
<td>Juliet</td>
<td>Pascal</td>
<td>boeing 42</td>
<td>255</td>
<td>12:45</td>
<td>14:20</td> <!-- exclude this from the values that will be compared -->
<td>12/1/2020</td> <!-- exclude this too -->
<td> <input type="checkbox" name="FlightId[]"> </td>
</tr>
<tr>
<td style="display:none"></td>
<td>test Flying</td>
<td>Juliet</td>
<td>Pascal</td>
<td>boeing 42</td>
<td>255</td>
<td>12:45</td>
<td>14:30</td> <!-- exclude this from the values that will be compared -->
<td>12/2/2020</td> <!-- exclude this too -->
<td> <input type="checkbox" name="FlightId[]"> </td>
</tr>
</tbody>
</table>
jQuery（在文档标题中）：
$(document).on('click', '.exc_toggle', function()
if($(this).data('exclude') == 1)
$(this).data('exclude', 0);
$(this).css('background-color', '');
else
$(this).data('exclude', 1);
$(this).css('background-color', '#F00');
);
jQuery（修改 ApprovalForm 提交事件）：
$('.ApprovalForm').submit(function(event)
event.preventDefault(); // Prevent the form from submitting via the browser
if ($(":checkbox:checked").length < 2 || $(":checkbox:checked").length > 2)
alert('You have to select two flights');
else
var ignore_indices = [];
var cnt = 0;
$('.exc_toggle').each(function()
if($(this).data('exclude') == 1)
ignore_indices.push(cnt);
cnt++;
);
var form = $(this);
//get all checkboxes that are selected
var selected = $("input:checked");
//loop through your columns
var x = 0;
for (var i = 1; i <= 17; i++)
if(ignore_indices.indexOf(i) < 0)
var prev = null;
$.each($(selected), function()
var curr = $(this).closest("tr").find("td").eq(i).text();
//if at least one value is different highlight the column
if (curr !== prev && prev !== null)
x++;
console.log(3333);
prev = curr;
)
else
prev = null;
console.log(x);
if (x <= 0)
$("#modal-Approve").modal('show');
$.ajax(
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize(),
).done(function(response)
$("#MessageStatus ").val(response);
location.reload();
).fail(function(data)
// Optionally alert the user of an error here...
alert(data);
);
else
alert('Selected flights are not the same, check if they are the same by using detail button');
);
要比较重复的起飞时间，请将“起飞”类添加到起飞时间列中的每个 td，然后添加此 jQuery：
$(document).on('change', 'input:checkbox', function()
var takeoff = '';
$('.takeoff').css('background-color', '');
$('input:checked').each(function()
var td_target = $(this).closest('tr').find('.takeoff');
takeoff = td_target.html();
var matches = $('input:checked').parents('tr').find('.takeoff:contains("'+takeoff+'")');
if(matches.length > 1)
td_target.css('background-color', '#F00');
else
td_target.css('background-color', '');
);
);
【讨论】：
感谢代码，它完美运行，对于遇到此问题的任何人，请转到您需要排除的位置并添加 data-exclude="1" 。 我已经更新了你，所以说它已经记录了但不会公开显示它 我不确定我是否理解您的第二条评论。代码有问题吗？ 完全没有，因为在我的投票被公开之前，我还没有达到 SO 设定的声誉点 请问如果选中复选框，我如何突出显示“TakeOffTime”列重复值，以上是关于Jquery比较用复选框选择的表行并比较列的主要内容，如果未能解决你的问题，请参考以下文章