Выделите строку с нулевым значением - jQuery (работает не так, как ожидалось)

Когда пользователь нажимает кнопку GetData, я получаю данные json и отображаю их в таблице html, как показано в демонстрации.

Демо: https://plnkr.co/edit/I4XYY6CZohf7IS6wP8dR?p=preview

Иногда значение может быть нулевым, как это было для переменной ссуды, показанной ниже.

  var loanNum = [{ "code": "23432", "description": "23432" }, { "code": null, "description": null }];

Если хотя бы одно значение для определенной строки является нулевым, я хочу выделить всю эту строку красным цветом, чтобы пользователь знал, что эта строка имеет нулевое значение. Я попытался с помощью приведенного ниже кода, но строка с нулевым значением не выделяется красным цветом.

if (loanNum[i].code == null){
      console.info("row has null value");
      $(this).css({'background-color':'red'});
}

Любые комментарии были бы полезны.

javascript jquery html

29.11.2018 18:48

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

133

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

вы нацеливаетесь на $(this), как если бы это текущая строка, даже если для этого нет причин (на самом деле это объект окна). Вам нужно выбрать строку, а затем покрасить ее в красный цвет, это должно помочь:

$('#loanTable tr')[j].style = "background-color:red"

или если вы хотите использовать метод jQuery css():

$($('#loanTable tr')[j]).css('background-colod','red')

хотя я не рекомендую его, так как он излишне многословен.

$($('#loanTable tr')[j]) <- не делай это Найдите минутку, чтобы понять, что делают ваши команды. Вы выбираете элементы, возвращая объект jQuery, затем вы получаете элемент j из объекта jQuery, который превращает его в элемент DOM, затем вы берете этот элемент и создаете из него новый объект jQuery. Вместо использования [j] в этом случае используйте eq(j), который сохранит элемент как объект jQuery, и тогда вам не придется снова вставлять его в $().

— 29.11.2018 18:57

29.11.2018 18:54

Ответ принят как подходящий

Обновлено Это будет проходить через все поля («код», «описание») и обнаруживать, имеет ли какое-либо из них нулевое значение.

function submitData() {
        var flag = true;
        $('#loanTable input[type = "text"]').val('');
        $('.mortgageType').val('');
        $('.order').val('');
        if (flag) {
            //values from backend
            var mortageType = [{ "code": "Home", "description": "Home" }, { "code": "Car", "description": "Car" }];
            var loanNum = [{ "code": "23432", "description": "23432" }, { "code": null, "description": null }];
            var status = [{ "code": "Approved", "description": "Approved" }, { "code": "Pending", "description": "Pending" }];
            var j = 0;
            //iterate and show the jsonData in the table2 when user click on submit button
            
            for (var i = 0; i < mortageType.length; i++) {
                j = j + 1;
                console.info("-- loanNum[i].code ---- " + loanNum[i].code);
                document.getElementById("mortageType" + j).value = mortageType[i].code;
                document.getElementById("loanNum" + j).innerText = loanNum[i].code;
                document.getElementById("status" + j).innerText = status[i].code;
                // Loop through all fields.
                Object.keys(loanNum[i]).forEach(function(key) {
                  // Check if any fields is null
                  if (loanNum[i][key] == null) {
                    $('#status' + j).parent().parent().css({'border':'red'});
                  }
                });
            } 
        }
    }

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>

<table class = "loanTable" id = "loanTable" border = "1">
    <tbody>
    <tr>
        <th>    <label for = "show"><span name = "3765" maxlength = "1"class = "message">Year</span></label> </th> <!-- From Dealer -->
        <th>    <label for = "show"><span name = "568" maxlength = "1" class = "message">Mortgage Type</span>&nbsp;
            <span name = "496" maxlength = "1" class = "message"></span>
        </label>
        </th>
        <th>    <label for = "show"><span name = "3702" maxlength = "1" class = "message">Loan Num</span></label> </th>
        <th>    <label for = "show"><span name = "2366" maxlength = "1" class = "message">Status</span></label> </th>
        <th>    <label for = "show"><span name = "179"  maxlength = "1" class = "message">Comments</span></label> </th>
    </tr>
    <tr>
        <td>
            <label for = "show" class = "ddownlabels"></label> <!-- From Dealer -->
            <select id = "year" name = "year" disabled>
            </select>
        </td>
        <td>
            <div class = "cloneX10 indField">
                <label for = "show" class = "ddownlabels"></label> <!-- From Dealer -->
                <select id = "mortageType1" name = "mortageType1" class = "mortgageType">
                  <option value = ""></option>
                    <option value = "Auto">Auto</option>
                    <option value = "Home">Home</option>
                    <option value = "Car">Car</option>
                </select>
                <input name = "ord1" id = "ord1" class = "order">
            </div>
        </td>
        <td><div class = "cloneX10 indField" id = "loanNum1"></div></td>
        <td><div class = "cloneX10 indField" id = "status1"></div></td>
        <td><div class = "cloneX10 indField" id = "comments1"></div></td>
    </tr>

    <!--Second row-->
    <tr>
        <td>
            <label for = "show" class = "ddownlabels"></label> <!-- From Dealer -->
            <select id = "year" name = "year" disabled>
            </select>
        </td>
        <td>
            <div class = "cloneX10 indField">
                <label for = "show" class = "ddownlabels"></label> <!-- From Dealer -->
                <select id = "mortageType2" name = "mortageType2" class = "mortgageType">
                  <option value = ""></option>
                    <option value = "Auto">Auto</option>
                    <option value = "Home">Home</option>
                    <option value = "Car">Car</option>
                </select>
                <input name = "ord2" id = "ord2"  class = "order">
            </div>
        </td>
        <td><div class = "cloneX10 indField" id = "loanNum2"></div></td>
        <td><div class = "cloneX10 indField" id = "status2"></div></td>
        <td><div class = "cloneX10 indField" id = "comments2"></div></td>
    </tr>

    <!--Third Row-->
    <tr>
        <td>
            <label for = "show" class = "ddownlabels"></label> <!-- From Dealer -->
            <select id = "year" name = "year" disabled></select>
        </td>
        <td>
            <div class = "cloneX10 indField">
                <label for = "show" class = "ddownlabels"></label> <!-- From Dealer -->
                <select id = "mortageType3" name = "mortageType3" class = "mortgageType">
                  <option value = ""></option>
                    <option value = "Auto">Auto</option>
                    <option value = "Home">Home</option>
                    <option value = "Car">Car</option>
                </select>
                <input name = "ord3" id = "ord3" class = "order">
            </div>
        </td>
        <td><div class = "cloneX10 indField" id = "loanNum3"></div></td>
        <td><div class = "cloneX10 indField" id = "status3"></div></td>
        <td><div class = "cloneX10 indField" id = "comments3"></div></td>
    </tr>

    </tbody>
</table><br>
<input type = "submit" value = "GetData" onclick = "submitData()">
</body>
</html>

Спасибо. Могу ли я выделить строку строки красным цветом, не выделяя красным цветом всю строку ..

— 29.11.2018 19:07

Обновлено. Спасибо.

— 29.11.2018 19:09

спасибо за обновление .. Мне интересно, если код if (creditNum [i] .code == null) {// код для выделения строки с нулевым значением красным цветом}, который я написал, является лучшим способом проверить наличие null, поэтому, если У меня есть 10 столбцов / полей, которые мне нужно проверить для каждого поля с условием OR (||). Есть ли лучший подход для проверки нулевых значений, кроме тех, которые я указал?

— 29.11.2018 19:13

Что-то такое? Я не уверен. Пожалуйста, проверьте это.

— 29.11.2018 19:37

29.11.2018 19:04