Изменение цвета столбца таблицы на основе значения, не работающего с использованием jquery в файле бритвы - PullRequest
Новая
       4

Изменение цвета столбца таблицы на основе значения, не работающего с использованием jquery в файле бритвы

0 голосов
/ 27 июня 2019

Я прочитал и перепробовал много постов, но это работает, но, к сожалению, пока не повезло.У меня есть проект asp.net MVC, где я пытаюсь изменить цвет столбца в зависимости от его значения.Например, если значение «красное яблоко», измените этот столбец bg на красный.

Ниже мой cshtml выглядит так: 

 <body onload="changebgcolor()">           

        @foreach (var item in Model)
        {
            <tr>
                <td class="fruit">
                   @Html.DisplayFor(modelItem => item.fruit)
                </td>

                <td class="vege">
                    @Html.DisplayFor(modelItem => item.vegetable)
                </td>
            </tr>
        }
 </body>

А вот мой скрипт: 

  function changebgcolor() {
    var table = $('#fruitsandveggies');
    $("tr.item").each(function () {
    var apple = $(this).find("td.fruit").text();

    if (apple == "RedApple")
    {
        $('.fruits').css('background', 'red');
    }
    if (apple == "GreenApple")
    {
        $('.fruits').css('background', 'green');
    }
});

}

Я вижу, что он возвращает apple == RedApple, но он не меняет цвет bg на красный или зеленый для зеленого яблока.То же самое для растительного поля.Я не мог понять, как заставить это работать.

1 Ответ

1 голос
/ 28 июня 2019

вы можете попробовать это, это работает для меня.

Я создал одну демонстрацию для вас.

enter image description here

    <html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
        <table>
            <tbody id="tablebody">          
                @foreach (var item in Model)
                {
                    <tr>
                        <td class="fruit">
                           @Html.DisplayFor(modelItem => item.fruit)
                        </td>

                        <td class="vege">
                            @Html.DisplayFor(modelItem => item.vegetable)
                        </td>
                    </tr>
                }
            </tbody>
        </table>
</body>

</html>

Ниже код для скрипта 

<script>
$(document).ready(function(){       
    $("#tablebody > tr").each(function (index,elem) 
    {       
        var apple = $.trim($(elem).find("td:first").text());
        if (apple == "RedApple")
        {
            $(elem).find("td:first").css('background', 'red');
        }
        else if (apple == "GreenApple")
        {
            $(elem).find("td:first").css('background', 'green');
        }   
    });
});
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...