Question

当用户单击GetData按钮时，我将获取json数据并显示在html表中，如演示中所示。

演示：https://plnkr.co/edit/I4XYY6CZohf7IS6wP8dR?p=preview

有时值可能为空，就像下面显示的loanNum变量一样。

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

如果特定行的至少一个值是null，我想用红色突出显示整个行，以便用户知道该行具有null值。我尝试了以下代码，但是具有空值的行不会用红色突出显示。

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

任何输入都会有所帮助。

Answer 1

即使没有理由（实际上是窗口对象），也将$(this)定位为当前行。您需要选择该行，然后将其着色为红色，这应该可以解决问题：

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

或者如果您想坚持使用jQuery的css()方法：

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

尽管我不建议这样做，因为它不必要地冗长。

Answer 2

已更新。此操作将遍历每个字段（“代码”，“说明”），并确定其中是否有空值。

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.log("-- 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>

突出显示具有空值的行-jQuery（无法按预期工作）

2 个答案: