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

• 将“exc_toggle”类添加到每个 在你的第一行
• 添加事件侦听器,用于单击这些类以切换“排除”数据属性
• 在中的每一行中添加一个隐藏单元格 所以你的列计数在标题和 表格主体 排
• 添加到表单提交事件侦听器以在“exc_toggle”类上迭代,并为每个数据创建一个to_ignore索引exclude=1
• 当我在你的忽略索引中被发现时,跳过你的比较

代码如下。

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

要比较重复的起飞时间,请在起飞时间列中将类“takeoff”添加到每个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', '');}
            });
        });