jQuery根据使用Array和if / else if的另一个单元格的值来设置表单元格的值

时间:2018-11-21 12:59:00

标签: jquery html arrays

我试图根据<td class="slaClass"></td>单元格中的值有条件地设置<td class="DaysLeft"></td>单元格的值。

console.log($(this).text());完美地显示了数组,我只是想不出如何将其转换为if / else if语句。

现在我只想插入文本,但是最终它将是图标。最终会有其他标准,但目前最好是简单的。

HTML代码:

<table>
    <tbody>
        <tr>
            <th>Applicants</th>
            <th>Interviews</th>
            <th>Offers</th>
            <th>Days Left to Fill</th>
            <th>SLA</th>
        </tr>
        <tr>
            <td>530</td>
            <td>50</td>
            <td>1</td>
            <td class="DaysLeft">125</td>
            <td class="slaClass"></td>
        </tr>
        <tr>
            <td>56</td>
            <td>0</td>
            <td>0</td>
            <td class="DaysLeft">25</td>
            <td class="slaClass"></td>
        </tr>
        <tr>
            <td>82</td>
            <td>6</td>
            <td>0</td>
            <td class="DaysLeft">62</td>
            <td class="slaClass"></td>
        </tr>
    </tbody>
</table>

jQuery代码;

window.onload = sla;

function sla() {
    var daysLeft = document.getElementsByClassName('DaysLeft');
    var slaClass = document.getElementsByClassName('slaClass');

    $(daysLeft).each(function() {
        console.log($(this).text());

        if (daysLeft <= 30) {
            console.log('Red');
        }
        else if (daysLeft > 30) {
            console.log('Warning');
        }
        else if (daysLeft >= 90) {
            console.log('Green');
        }
    });            
};

4 个答案:

答案 0 :(得分:1)

如果您使用的是JQuery,则不需要window.onload函数。

$(document).ready(function(){
       var daysLeft = $('.DaysLeft');
        $(daysLeft).each(function() {
             console.log($(this).text()); //remember $(this).text() will return a string value so either convert it to integer or change your condition with string values.
            var currentVal=$(this).text(); // assign a current value to increase its performance.
            if(currentVal !="" && currentVal!=undefined)
            {
               if (parseInt(currentVal) <= 30) {
                console.log('Red');
               }
               else if (parseInt(currentVal) > 30) {
                console.log('Warning');
               }
               else if (parseInt(currentVal) >= 90) {
                console.log('Green');
               }
           }
        })
})

答案 1 :(得分:0)

应该像

$(daysLeft).each(function(data) {
            console.log($(this).text());
            var value = parseInt(data.val());

            if (value <= 30) {
                console.log('Red');
            }
            else if (value > 30) {
                console.log('Warning');
            }
            else if (value >= 90) {
                console.log('Green');
            }
        });     

答案 2 :(得分:0)

您在条件中使用daysLeft,其中daysLeft是DOM元素。

使用:

if (parseInt($(this).text()) <= 30) 

答案 3 :(得分:0)

逻辑有些瑕疵,因为只要对警告条件的间隔没有限制,控制台就永远不会显示绿色,因为62和125都大于30。警告条件应按以下方式进行限制:< / p>

if (value > 30 && value < 90) {
   console.log('Warning');
}

哪个将捕获62个,但不捕获125个,将继续传递给Green状态。

或者,您也可以在警告之前像这样将Green向上移动作为第二个条件:

if (daysLeft <= 30) {
   console.log('Red');
} else if (daysLeft >= 90) {
   console.log('Warning');
} else if (daysLeft > 30) {
   console.log('Green');
}