JS（jQuery）：随机触发单击 2 个表格行

Question

鉴于此 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>

我正在尝试从每个表中随机触发 2 个<tr>。我什至无法做到这一点。

目前我使用的测试是：

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

但是这个触发器只是第一个表的第一行。

那我该怎么办：

1. 当我按下#按钮时，
2. 从每个表中获取 2 个随机行，触发器
3. 每 10 毫秒点击一次每一行（这样他们就有了顺序）。

关于应用程序：

这是一个音乐播放器网站。每张桌子都有不同风格的音乐。摇滚，另类，爵士等。有一个按钮'随机选择音乐'）。该按钮将触发每个表中的 2 个随机 tr，因此您最终将 2 首爵士歌曲、2 首摇滚歌曲等添加到播放列表中。表格看起来像这样：http://dribbble.com/system/users/31916/screenshots/167289/k-dribble.png?1309036379 但这些复选框不是实际的复选框，而是在点击时改变位置的图像，看起来和感觉比复选框更好，但仍然与复选框相同。

用户可以通过单击行上的任意位置（逻辑）触发“复选框”或选择歌曲，因此后端的开发方式是捕获行上任意位置的点击，而不是特定的复选框（因此我我没有选择触发这些）。我认为没有更好的解决方案可以从每个表中随机触发 2 行点击。

支持 IE8+。

Answer 1

请看下面我的版本，

DEMO

注意：下面的代码有一些演示代码和多余的变量，您可以清理它们，但我将其留在那里以使代码看起来清晰且不言自明。

$(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 />');
    });
});

Answer 2

我首先建议您以不同的方式执行此操作，但如果您打算触发点击事件，这是一般的想法。

  $(".tab").each(function(){
        var count = $(this).children(tr).length;    
        var r1 = Math.floor(Math.random()*count); //Get a random number less than the total count of rows
        $(this).children('tr').eq(r1).trigger('click');//retrieve the nth (r1) item in the list and fire it's trigger event

    });

Answer 3

在 Fiddle 上也更新了新代码

也许更像这样？ ...

$(function() {
    $("button").click(function(e) {
        $(".selected").removeClass("selected");

        $("table").each(function(i) {
            var irand = {
                a: Math.floor((Math.random()*($(this).find("tr").length)-1)+1),
                b: undefined
            };

            while (irand.b == irand.a || irand.b == undefined) {
                irand.b = Math.floor((Math.random()*($(this).find("tr").length)-1)+1);
            };

            console.log($(this).find("tr").filter(function(i) { return i == irand.a || i == irand.b }).addClass("selected"));
        });
    });
});​

See working fiddle here ...