Jquery比较用复选框选择的表行并比较列

Question

我有一个表，我使用复选框比较行值以查看它们是否相同，我正在使用 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 值

Answer 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', '');}
            });
        });