用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;