Question

Given this HTML:

<div id="TABLE1" class="tabs">
    <table>
        <tbody datasrc="Music">
            <tr id="randomid">lorem</tr>
            <tr id="foo">lorem</tr>
            <tr id="abcde">lorem</tr>
            <tr id="fghijk">lorem</tr>
            <tr id="lmnop">lorem</tr>
            <tr id="qwerty">lorem</tr>
        </tbody>
    </table>
</div>
<div id="TABLE_2" class="tabs">
    <table>
        <tbody datasrc="Music">
            <tr id="random5">lorem</tr>
            <tr id="farhaf">lorem</tr>
            <tr id="haerf">lorem</tr>
            <tr id="hagasdg">lorem</tr>
            <tr id="hrfafh">lorem</tr>
            <tr id="qwerty">lorem</tr>
        </tbody>
    </table>
</div>
<div id="LASTTABLE" class="tabs">
    <table>
        <tbody datasrc="Music">
            <tr id="rtefdgag">lorem</tr>
            <tr id="wrtjfd">lorem</tr>
            <tr id="reaht">lorem</tr>
            <tr id="aggag">lorem</tr>
            <tr id="rthhre">lorem</tr>
            <tr id="argarg">lorem</tr>
        </tbody>
    </table>
</div>

I am trying to trigger 2 <tr>‘s from each table randomly. I cant even thing of the way doing this.

Currently for my test I use:

$("#button").on('click', function () {
    $('#randomid').trigger('click')
})

but this trigger’s only the first row from the first table.

So how can I:

1. When I press #button,
2. Get 2 random row’s from each table, Trigger
3. click each row every 10 ms (so they have an order).

About the app:

It is a music player website. Each table has different style of music. Rock, Alternative, Jazz etc. There is a button ‘randomly select music’). That button, will trigger 2 random tr’s from each table so you end up with 2 jazz songs, 2 rock songs etc to be added to the playlist. The table looks something like this: http://dribbble.com/system/users/31916/screenshots/167289/k-dribble.png?1309036379 but those checkboxes are not actual checkboxes but images which change position on click to look and feel better than a checkbox and still act the same as a checkbox.

The user can trigger the ‘checkbox’ or choose a song by clicking anywhere on the row (logical), so the back-end is developed in a way to capture clicks anywhere on a row and not specificly the checkbox (thus I am not choosing to trigger those). I dont think there is a better solution that just trigger click randomly 2 row from each tble.

Support for IE8+.

Answer 1

See my version below,

DEMO

Note: Below code has some demo code and redundant vars which you can clean up, but I am leaving it there as to make the code look clear and self explanatory.

$(function() {
    var $tables = $('table'); //gets the tree tables

    var mQ = []; //music queue
    var timer = null;
    $('button').click(function () {
        $('#result').html(''); //demo code
        var t = 0, $tr;
        var t1 = [];
        $tables.each(function () {
            $tr = $(this).find('tr');

            t1[0] = Math.floor(Math.random()*$tr.length);
            t1[1] = Math.floor(Math.random()*$tr.length);

            while (t1[0] == t1[1]) { //To make sure not same row is selected
                t1[1] = Math.floor(Math.random()*$tr.length);
            }

            mQ.push($tr.get(t1[0]));
            mQ.push($tr.get(t1[1]));
        });

        timer = setInterval(function () {//Create timer to trigger click every 10ms
            if (mQ.length == 0) {
                clearInterval(timer);
                return false;
            }
            $(mQ.shift()).click().addClass('selected');            
        }, 10);
    });

    $('tr').click(function () {
        //do your magic
        $('#result').append(this.id + '<br />');
    });
});