Home How to async loops through HTML table with condition?
Reply: 0

How to async loops through HTML table with condition?

user2794
1#
user2794 Published in July 20, 2018, 1:18 am

I have table with some row in it. I wanted to loop through those rows and put selector at the current row. This loop should start at index 0 to the last row and restart from 0 again over and over again until stop button is clicked.

So far I achieved this by using interval:

// Start sequence function
function startSequence() 
{
    console.log('start sequence initiated.');

    //Disable start, add, open, save button and enable stop button
    $('#button_play_seq').addClass('disabled');
    $('#button_add_seq').addClass('disabled');
    $('#button_open_seq').addClass('disabled');
    $('#button_save_seq').addClass('disabled');
    $('#button_stop_seq').removeClass('disabled');

    var number = 0;
    const rowCount = $('#sequence_table').find('tr').length;

    // using interval only to simulate row selection change
    interval = setInterval(function () {
        console.log('sequence tick -> ' + number);

        // Remove class marker on the previous row
        $('#sequence_table tr').eq(number - 1).removeClass('purple accent-3 white-text');
        // Add class marker on the current row
        $('#sequence_table tr').eq(number).addClass('purple accent-3 white-text');

        number++;
        if (number === (rowCount)) {
            number = 0;
        }
    }, 1000);
}

// Stop sequence function
function stopSequence() 
{
    console.log('stop sequence initiated.');

    // Enable start, add, open, save button and disable stop button
    $('#button_play_seq').removeClass('disabled');
    $('#button_add_seq').removeClass('disabled');
    $('#button_open_seq').removeClass('disabled');
    $('#button_save_seq').removeClass('disabled');
    $('#button_stop_seq').addClass('disabled');

    clearInterval(interval);

    // Clear all rows from selection marker
    $('#sequence_table tr').removeClass('purple accent-3 white-text');
}

But using this method I'm unable to put condition where selection should ONLY go to next row if certain conditions are met and will WAIT until those conditions are met. I wanted something like :

var joint1done = ($('#range_joint1').val() === $('#text_joint1').val());
var joint2done = ($('#range_joint2').val() === $('#text_joint2').val());
var joint3done = ($('#range_joint3').val() === $('#text_joint3').val());
var joint4done = ($('#range_joint4').val() === $('#text_joint4').val());
var joint5done = ($('#range_joint5').val() === $('#text_joint5').val());

if (joint1done && joint2done && joint3done && joint4done && joint5done) {
    // Go to the next row
    next();
}

I'm new to Javascript, I've read some async module but unable to decide which one is suitable to my needs.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.323476 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO