用Javascript替换表格单元格中的文本值

Question

我真的很费劲用Javascript来掩盖数据值。我在一所学校工作，他们正在取消“传统”分级。因此，他们不希望他们的成绩册显示百分比，而是显示基于百分比的词（是的，我知道）。我想用字符串替换％值。使用这个JS，它正确地提醒我所有的值，但返回值永远不会替换单元格中的％值。我错过了什么？我对JS非常陌生，所以这可能是一个简单的错误。

$('.percentage').each(function() { 
 
    var corrected = $(this).html(); 
 
    corrected = parseFloat(corrected); 
 
    alert(corrected); 
 
    switch (true) { 
 
    case (corrected < 48.75): 
 
     return 'Unsatisfactory'; 
 
     break; 
 
    case (corrected < 61.25): 
 
     return 'Approaching '; 
 
     break; 
 
    case (corrected < 73.75): 
 
     return 'Approaching+ '; 
 
     break; 
 
    case (corrected < 86.25): 
 
     return 'Meeting '; 
 
     break; 
 
    case (corrected < 94.9): 
 
     return 'Meeting+ '; 
 
     break; 
 
    case (corrected <= 100): 
 
     return 'Exceeding '; 
 
     break; 
 
    default: 
 
     return 'N/A'; 
 
    } 
 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

这会怎么做。它分析单元格的文本，并用基于当前分数的字符串值替换它。

$(".score").each(function() { 
 
    var $this = $(this); 
 
    $this.text(() => { 
 
    var num = parseFloat($this.text()); 
 
    var val; 
 
    if (num < 48.75) 
 
     val = 'Unsatisfactory'; 
 
    else if (num < 61.25) 
 
     val = 'Approaching '; 
 
    else if (num < 73.75) 
 
     val = 'Approaching+'; 
 
    else if (num < 86.25) 
 
     val = 'Meeting'; 
 
    else if (num < 94.9) 
 
     val = 'Meeting+'; 
 
    else if (num <= 100) 
 
     val = 'Exceeding'; 
 

 
    return val; 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td>Score</td> 
 
    <td class="score">48.75</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Score</td> 
 
    <td class="score">38.25</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Score</td> 
 
    <td class="score">85.12</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Score</td> 
 
    <td class="score">67.50</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Score</td> 
 
    <td class="score">87.80</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Score</td> 
 
    <td class="score">10.50</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Score</td> 
 
    <td class="score">96.50</td> 
 
    </tr> 
 
</table>

对TD类可以确保你只解析细胞与实际得分。

Answer 2

从$().each返回一个值将不符合您的目的。你想改变你遍历元素innerText：

$('.percentage').each(function() { 
 
    var corrected = $(this).html(); 
 
    corrected = parseFloat(corrected); 
 
    let text; 
 

 
    switch (true) { 
 
    case (corrected < 48.75): 
 
     text = 'Unsatisfactory'; 
 
     break; 
 
    case (corrected < 61.25): 
 
     text = 'Approaching '; 
 
     break; 
 
    case (corrected < 73.75): 
 
     text = 'Approaching+ '; 
 
     break; 
 
    case (corrected < 86.25): 
 
     text = 'Meeting '; 
 
     break; 
 
    case (corrected < 94.9): 
 
     text = 'Meeting+ '; 
 
     break; 
 
    case (corrected <= 100): 
 
     text = 'Exceeding '; 
 
     break; 
 
    default: 
 
     text = 'N/A'; 
 
    } 
 

 
    $(this).text(text) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="percentage">40</div> 
 
<div class="percentage">72.65</div> 
 
<div class="percentage">100</div>

这里$().text正是这样做的。你也可以使用香草JS：

this.innerText = text;