在行内随机添加 html 元素

Question

我有一个大网格，用于时间线视图。我想要的是下一个 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.

Answer 1

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

$('.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