社区所有版块导航
Python
python开源   Django   Python   DjangoApp   pycharm  
DATA
docker   Elasticsearch  
aigc
aigc   chatgpt  
WEB开发
linux   MongoDB   Redis   DATABASE   NGINX   其他Web框架   web工具   zookeeper   tornado   NoSql   Bootstrap   js   peewee   Git   bottle   IE   MQ   Jquery  
机器学习
机器学习算法  
Python88.com
反馈   公告   社区推广  
产品
短视频  
印度
印度  
Py学习  »  Jquery

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

Obyno Pac • 5 年前 • 737 次点击  

我有一个表,我使用checkbox比较行值以查看它们是否相同,使用jquery代码比较由checkbox选择的表行,它工作得很好,现在我希望能够从比较中排除两列并比较两个选定行中的其他列

$('.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值

Python社区是高质量的Python/Django开发社区
本文地址:http://www.python88.com/topic/56791
 
737 次点击  
文章 [ 1 ]  |  最新文章 5 年前
Zigabutanoid
Reply   •   1 楼
Zigabutanoid    5 年前
  • 将“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', '');}
            });
        });