Question

我有一个表，其中有多行，每行都有一个检查按钮。单击每行上的按钮后，我必须检查是否有任何行存在customerno，并突出显示其girno小于同一customerno的所选行的所有行。我无法将该行值与其他所有行进行比较。

在单击时，我能够获得当前行的customerno和girno，但我坚持要继续比较同一选定的customerno的其他行。

 <table class="pr_indextable">
 <tr class=".prRow">
  <td><?php echo $this->Form->checkbox("jobcardproduct1", array('class'=>'selectcheck'));?></td>
  <td class="customerno">22</td>
  <td class="girno">GIR1</td>
 </tr>

 <tr class=".prRow">
  <td><?php echo $this->Form->checkbox("jobcardproduct2", array('class'=>'selectcheck'));?></td>
  <td class="customerno">223</td>
  <td class="girno">GIR2</td>
 </tr>

 <tr class=".prRow">
  <td><?php echo $this->Form->checkbox("jobcardproduct3", array('class'=>'selectcheck'));?></td>
  <td class="customerno">22</td>
  <td class="girno">GIR3</td>
 </tr>

   <tr class=".prRow">
  <td><?php echo $this->Form->checkbox("jobcardproduct3", array('class'=>'selectcheck'));?></td>
  <td class="customerno">22</td>
  <td class="girno">GIR4</td>
 </tr>
 </table>

<script>
   $(document).ready(function() {
    $(this).find(".prRow").each(function(){
        var inqrow=this;
        $(inqrow).find(".selectcheck").click(function(){
            var ischecked= $(this).is(':checked');
            if(ischecked){
                 var girno=$(inqrow).find(".girno").val();
                 var customerno=$(inqrow).find(".customerno").val();  
                $(inqrow).css('background-color','#3c8dbc');
            }
        });         
    });
});

预期：单击选择按钮，突出显示girno小于相同客户编号的其他行的行。

Answer 1

突出显示girno小于同一customerno的其他行的行。

在您的示例代码girno中不是number，因此您无法进行比较，在我的代码中，我假设girno是number。 这是可行的解决方案

$(document).ready(function () {

            $('.selectcheck').change(function () {
                var rows = $('.pr_indextable tr'); //rows in table
                if ($(this).is(`:checked`)) {

                    let customerNumber = $(this).parent().next().text(); 
                    //selected customer number
                    let girNumber = $(this).parent().next().next().text(); //selected girNumber
                    
                    // iterate over all rows and check 

                    $.each(rows, function (i, item) {

                        // if current row's cutomer number is same as selected row's customer number

                        if ($(this).find('.customerno').text() == customerNumber) {

                            //compare the girnumber of current row and selected row
                            if ($(this).find('.girno').text() < girNumber) {
                                
                                //hight the row
                                $(this).css('background-color', '#3c8dbc');
                            }
                        }
                        else {
                            //remove highligh, if have any
                            $(this).css('background-color', 'initial');
                        }
                    })
                }
                else {
                    //if unchecked than remove highlight
                    $.each(rows, function (params) {
                        $(this).css('background-color', 'initial');
                    })
                }
            })
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="pr_indextable">
        <tr class=".prRow">
            <td><input type="checkbox" class="selectcheck" /></td>
            <td class="customerno">22</td>
            <td class="girno">1</td>
        </tr>

        <tr class=".prRow">
            <td><input type="checkbox" class="selectcheck" /></td>
            <td class="customerno">223</td>
            <td class="girno">2</td>
        </tr>

        <tr class=".prRow">
            <td><input type="checkbox" class="selectcheck" /></td>
            <td class="customerno">22</td>
            <td class="girno">3</td>
        </tr>

        <tr class=".prRow">
            <td><input type="checkbox" class="selectcheck" /></td>
            <td class="customerno">22</td>
            <td class="girno">4</td>
        </tr>
    </table>

单击时，检查表的所有行值

1 个答案: