Установите цвета фона ячеек на основе значения внутри ячейки

У меня есть таблица, заполненная случайными числами, и мне нужно установить цвет фона каждой ячейки на основе числа в этой ячейке для цвета rgba. Теперь эти числа меняются при обновлении, поэтому цвета должны меняться при изменении числовых значений. Как я могу это сделать? Спасибо!

HTML

<table class="table table-bordered">
<tbody>
    <tr>
        <td>636407029</td>
        <td>612541294</td>
        <td>870806031</td>
    </tr><tr>
        <td>110235053</td>
        <td>924102758</td>
        <td>221478283</td>
    </tr><tr>
        <td>572041102</td>
        <td>236316470</td>
        <td>781401130</td>
    </tr>
</tbody>
</table>

html jquery css dynamic-tables
person tjoenz    schedule 04.03.2014    source источник
comment
Как вы конвертируете 636407029 в RGBA?   -  person Roko C. Buljan    schedule 04.03.2014

Ответы (3)


arrow_upward
1
arrow_downward

попробуй так

$(".table-bordered td").each(function(){
$(this).attr("bgcolor",$(this).html());
});

скрипка

html

<table>
<tbody>
<tr>
    <td bgcolor="636407029">636407029</td>
    <td>612541294</td>
    <td>870806031</td>
</tr><tr>
    <td>110235053</td>
    <td>924102758</td>
    <td>221478283</td>
</tr><tr>
    <td>572041102</td>
    <td>236316470</td>
    <td>781401130</td>
</tr>
</tbody>
 </table>
person Anoop Joshi    schedule 04.03.2014
comment
@AnnoopJoshi Я пробовал что-то подобное, но не сработало, и я подумал, что это я. Я вижу, что это работает в вашей скрипке, но не будет работать с моим кодом:/ - person tjoenz; 04.03.2014
comment
в вашем html нет тега таблицы. Попробуйте после того, как дали это - person Anoop Joshi; 04.03.2014
comment
позвольте мне обновить мой HTML выше, потому что у меня есть тег таблицы, извините за это. - person tjoenz; 04.03.2014
comment
@urbanrunic Я подозреваю, что это может перевесить какой-то другой стиль - person Anoop Joshi; 04.03.2014
comment
Спасибо! Я понял. Это было переопределено, и мне пришлось исправить стили. Спасибо! - person tjoenz; 05.03.2014

arrow_upward
0
arrow_downward

Это должно работать, если вы напишете функцию transformNumberToColour.

$("td").each(function(){
    $element = $(this);
    val = Number($element.html());
    rgbColour = transformNumberToColour(val); // not shure how you want to do this
    $element.css('background-color', rgbColour);
});
person fitek    schedule 04.03.2014

arrow_upward
0
arrow_downward

Вам нужно будет сделать что-то вроде:

$("td").each(function () {
    var new_color = make_color_from_content($(this).text());
    $(this).css("background-color", new_color);
});

Конечно, вам придется написать некоторую функцию (make_color_from_content), чтобы преобразовать значение из «636407029», например, в «rgba (xxx, xxx, xxx, x)».

person iSWORD    schedule 04.03.2014