How to compare cell value to every row in jquery?

Viewed 26

I have a table in which I want to compare the cell value with others in each row. The table can be dragged and dropped to update the sequence number. I don't want to update the sequence number if the pos_nbrs are the same but the position is temporary. For example, I finished comparing row 1 with row 2, row3, and row 4 but nothing happens this round. Next, I move to row 2 and compare it with row 3, and row 4. Then compare row 3 and row 4. If the condition is met, I want to stop and go out of the loop and execute the next line of codes after the loop.

Here's my table:

<table class="t-Report-report ui-sortable" id="seq_report">
    <thead>
        <tr class="ui-sortable-handle">
            <th class="t-Report-colHead" align="left" id="PK_DISPLAY">&nbsp;</th>
            <th class="t-Report-colHead" align="center" id="POS_NBR">Position</th>
            <th class="t-Report-colHead" align="center" id="DISP_VAL">Description</th>
            <th class="t-Report-colHead" align="center" id="SEQ_NBR">Seq</th>
            <th class="t-Report-colHead" align="center" id="PERM"></th>
        </tr>
    </thead>
    <tbody>
        <tr data-id="19691" class="ui-sortable-handle">
            <td class="t-Report-cell" headers="PK_DISPLAY"><a href="#" data-id="19691"></a></td>
            <td class="t-Report-cell" headers="POS_NBR">05M</td>
            <td class="t-Report-cell" headers="DISP_VAL">t05</td>
            <td class="t-Report-cell" headers="SEQ_NBR">1</td>
            <td class="t-Report-cell" headers="PERM">Perm</td>
        </tr>
        <tr data-id="19692" class="ui-sortable-handle">
            <td class="t-Report-cell" headers="PK_DISPLAY"><a href="#" data-id="19692"></a></td>
            <td class="t-Report-cell" headers="POS_NBR">06M</td>
            <td class="t-Report-cell" headers="DISP_VAL">t06</td>
            <td class="t-Report-cell" headers="SEQ_NBR">2</td>
            <td class="t-Report-cell" headers="PERM">Perm</td>
        </tr>
        <tr data-id="19690" class="ui-sortable-handle">
            <td class="t-Report-cell" headers="PK_DISPLAY"><a href="#" data-id="19690"></a></td>
            <td class="t-Report-cell" headers="POS_NBR">04M</td>
            <td class="t-Report-cell" headers="DISP_VAL">t04</td>
            <td class="t-Report-cell" headers="SEQ_NBR">3</td>
            <td class="t-Report-cell" headers="PERM">Temp</td>
        </tr>
        <tr data-id="19687" class="ui-sortable-handle">
            <td class="t-Report-cell" headers="PK_DISPLAY"><a href="#" data-id="19687"></a></td>
            <td class="t-Report-cell" headers="POS_NBR">04M</td>
            <td class="t-Report-cell" headers="DISP_VAL">t04</td>
            <td class="t-Report-cell" headers="SEQ_NBR">4</td>
            <td class="t-Report-cell" headers="PERM">Perm</td>
        </tr>
    </tbody>
</table>

Here's my codes:

 var fixHelper = function (e, ui) {
    ui.children().each(function () {
        $(this).width($(this).width());
    });
    return ui;
}
function updateDisplaySeq(pRegionID) {

    //var results = $('#seq_report').find("table.t-Report-report").sortable('toArray', {attribute: 'data-id'});
    var results = $(pRegionID).find("table.t-Report-report").sortable('toArray', { attribute: 'data-id' });
    // var results = $("table.t-Report-report").sortable('toArray', {attribute: 'data-id'});
    //console.log("results: " + results);
    apex.server.process("UPDATE_ORDER",
        { f01: results },
        {

            success: function (pData) {
                apex.message.showPageSuccess("New order saved.");
                apex.event.trigger(pRegionID, 'apexrefresh');

            },
            dataType: "text"
        }
    );
}

function makeSortable(pRegionID) {
    var $r = $("#report_" + pRegionID);
    var r = $r[0];// add ID to TR element so we know the correct position
    var $perm;
    var $obj;

    $r.find("[headers='PK_DISPLAY'] a").each(function () {
        //console.log($(this));
        $(this).parent().parent().attr('data-id', $(this).data("id"));
        // $(this).closest('tr').attr('data-id',$(this).data("id"));

    });// finally make it sortable

    $r.find("table.t-Report-report").sortable({
        items: 'tr'
        , containment: r
        , helper: fixHelper
        , update: function (event, ui) {
            $obj = $r.find("[headers='POS_NBR']");
            //var i = 0;
            //var j = 0;
            $perm = $obj.next().next().next();
            outerLoop:
            for (var i = 0; i < $obj.length-1; i++) {
                
                for (var j = 0; j < $obj.length - 1 - i; j++) {
                    if($obj[i].innerHTML == $obj[i+1+j].innerHTML && $perm[i].innerHTML == 'Temporary') {
                        apex.message.alert("Sequence number of Temporary bid of " + $obj[i + 1 + j].innerHTML + " cannot be smaller than Permanent bid of same position number " + $obj[i].innerHTML);
                        apex.event.trigger($r, 'apexrefresh'); 
                        
                        break outerLoop;                   
                    }
                    else{
                        updateDisplaySeq(r);
                    }
                }
            }
        }
    });
    
}

In my codes, the alert message box popup but the sequence number will be updated.

0 Answers
Related