在行内随机添加html元素

时间:2015-04-17 08:25:05

标签: jquery random repeat tabular

我有一个大网格,用于时间线视图。我想要的是下一个div被随机添加到行(而不是所有行),因此网格充满了彩色框。 div是:

    <div class="bar ganttRed" id="b4" style="width: 330px;">
        <div class="label" style="color: rgb(191, 191, 191); float: left; margin-left: 23.7px;"> 2836DE
        </div>
    </div>

    <div class="bar ganttGreen" id="b6" style="width: 66px;">
        <div class="label" style="color: rgb(61, 61, 61); float: left; margin-left: 14px;"> 2142 FG
        </div>
    </div>

我只是不知道应该怎么做。

And check out my Jsfiddle for viewing the html grid.

1 个答案:

答案 0 :(得分:2)

不确定这是你想要的,但你应该明白......

$('.div-table-row').each(function () {

    var color = getRandomColor();
    var bar = '<div class="bar" style="background-color: ' + color + '; width: ' + (Math.floor(Math.random() * 200) + 80) + 'px;"><div class="label">' + color + '</div></div>';
    $('.div-table-td:eq(' + Math.floor(Math.random() * 15) + ')', this).html(bar);
});

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

JSFiddle demo

修改

2条模式:

JSFiddle demo