获取Student的name元素具有数组中的最高点值，并在jquery中突出显示此名称

问题描述 投票：1回答：2

我想得到学生的名字有这个名字的最高点和CSS。

HTML

这些代码将添加到视图中

    var html = "";
        for (var i = 0; i < dssv.length; i++) {
            var sv = dssv[i]; // dssv is the list-student
            var stt = i + 1;
            var sv_html = "<tr><td>" + stt + "</td><td>" + sv[0] + "</td><td>" + sv[1] +
                "</td><td>" + sv[2] + "</td><td>" + sv[3] + "</td><td>" +
                sv[4] + "</td><td>" + sv[5] + "</td><td>" + "<button>delete</button>" + "</td></tr>";
            html = html + sv_html;
        }
        $('#list-student').html(html);
    });

jQuery的

// Have button in HTML to find the student
$("#findStudentBtn").click(function() {

这些代码用来计算平均点数

        var point = [];
        for (var i = 0; i < dssv.length; i++) {
            var sv = dssv[i]; // dssv is the list-student
            var stt = i + 1;
// sv[2] = math, // sv[3] = english, // sv[4] = literature point 
            var pointAverage = (parseInt(sv[2]) + parseInt(sv[3]) + parseInt(sv[4])) / 3;
            point.push(pointAverage);
        }


        var iterator = point.values();

这些代码发现学生有最高分，我想提醒学生的名字。

        let highest = point[0];
        let nameHighest = "";
        for (let elements of iterator) {
            if (highest < elements) {
                highest = elements;
                // My idea: with the single highest point from elements, I will assign its name.
                nameHighest = /*what is the syntax am I write for this line*/;
                    }
        }

        alert('The student ' + nameHighest +' has highest point: ' + highest + ' point');

这些代码是这行的CSS有名称。但是，它没有用。请修理它来帮助我。真诚。

        $("#list-student").each(function() {
            let el = $('#list-student').html();
                if (el == highest) {
                $('#ds-sv').parent().css({ 'font-style': 'italic', 'color': 'red' });
            }
        });
    });

这是我想要的结果。

enter image description here

javascript jquery html css
2个回答
2
投票

您可以在tr标签内的每个循环中执行您的要求，仅在一个循环中找到最高要求。

function findHighest(){
     var highest = 0; // assum min 0
     var highestItem;
     $('tr').each(function(index, item){
        if(index > 0){
        var math = $(item).find('td').eq(1).text();
        var eng = $(item).find('td').eq(2).text();
        var lit = $(item).find('td').eq(3).text();

        //alert(math)

        var sum = parseFloat(math) + parseFloat(eng) + parseFloat(lit)
        if (sum > highest){
            highest = sum;
            highestItem = item;
        }
      }
     })

      $(highestItem).css({ 'font-style': 'italic', 'color': 'red' });
}

演示：

function findHighest(){
     var highest = 0; // assum min 0
     var highestItem;
     $('tr').each(function(index, item){
        if(index > 0){
        var math = $(item).find('td').eq(1).text();
        var eng = $(item).find('td').eq(2).text();
        var lit = $(item).find('td').eq(3).text();
        
        //alert(math)
        
        var sum = parseFloat(math) + parseFloat(eng) + parseFloat(lit)
        if (sum > highest){
        highest = sum;
        highestItem = item;
        }
        }
       
       
     })
	 
	  $(highestItem).css({ 'font-style': 'italic', 'color': 'red' });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Name</th>
    <th>Math</th>
    <th>English</th>
    <th>Litrature</th>
  </tr>
 
  <tr>
    <td>Kee</td>
    <td>8</td>
    <td>8</td>
     <td>8</td>
  </tr>
  <tr>
    <td>Lee</td>
     <td>9</td>
    <td>9</td>
     <td>9</td>
  </tr>
  
</table>

<button onclick="findHighest()">Find</button>

</body>
</html>
0
投票

我认为这就是你要找的东西：

此代码获取学生数据（名称和分数）的数组并将它们插入表中，然后通过单击Show Top Student按钮，它突出显示具有最高分数平均值的表行。

            <button id="showTop">Show Top Student</button>
            <table>
                <thead>
                    <tr>
                        <td>Name</td>
                        <td>Math</td>
                        <td>English</td>
                        <td>Literature</td>
                    </tr>
                </thead>
                <tbody>
                    <!-- contents will be filled by js codes -->
                </tbody>
            </table>


            <script type="text/javascript">

                let studentsScores = [
                    ['KEE', 8, 8, 8],
                    ['LE', 9, 9, 9]
                ];

                let tbodyHtml = '';
                let avgScores = [];

                for (let i = 0; i < studentsScores.length; i ++) {

                    tbodyHtml += '<tr>';
                    let studentsTotalScore = 0;
                    let numOfSubjects = studentsScores[i].length - 1; // -1 for ignoring the name field

                    for (let j = 0; j < studentsScores[i].length; j ++) {
                        tbodyHtml += '<td class="item-'+ i +'">' + studentsScores[i][j] + '</td>';

                        if (j > 0) { // ignore the name filed
                            studentsTotalScore += studentsScores[i][j];
                        }

                    }

                    avgScores.push([i, studentsTotalScore / numOfSubjects]);
                    tbodyHtml += '</tr>';
                }

                jQuery('tbody').html(tbodyHtml);

                jQuery('#showTop').on('click', function() {

                    for (let i = 1; i < avgScores.length; i ++) {
                        if (avgScores[i-1][1] > avgScores[i]) {
                            jQuery('td.item-' + avgScores[i-1][0]).css('background-color', 'yellow');
                        }
                        else {
                            jQuery('td.item-' + avgScores[i][0]).css('background-color', 'yellow');
                        }
                    }

                });
            </script>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.