изменить цвет ячеек, содержащих «-», на желтый в таблице оценок учеников в формате html - PullRequest
Новая
       12

изменить цвет ячеек, содержащих «-», на желтый в таблице оценок учеников в формате html

0 голосов
/ 01 марта 2019

В основном выученные js за последние 3 часа, поэтому я прошу прощения, если есть какие-либо ошибки, но в основном «-» используется, чтобы указать, что задание не было отправлено, и в этих ячейках мне нужно сделать его желтым, чтобыуказывают на это, я думаю.Вот моя функция javaScript для вычисления среднего значения этих оценок, и если кто-то может помочь, это будет с благодарностью.Также, если кто-то может помочь с эффективностью этого кода и несколько полезных ссылок для изучения JSБольшое спасибо! 

     getAverageFunction = function()
     {

        var Table = document.getElementById('gradesTable');
        var rowLength =Table.rows.length;

       for(var i =1; i<rowLength; i++)
        {
          var cellsInTable = Table.rows.item(i).cells;
          var sum = 0;


           for(var j =2; j< cellsInTable.length-1; j++)
            {
               var valueCell = cellsInTable.item(j).innerHTML;

               var currentValue = parseInt(valueCell);


               if(currentValue >= 0 && currentValue <=100)
                   `enter code here`{
        sum += currentValue; 

      }
            //trying to turn cells that contain '-' yellow
         if(cellsInTable.value === '-')
         {
             cellsInTable.style.backgroundcolor ="yellow"
         }

    }
        var gradeAverage =0

      gradeAverage = sum/5;

      if(gradeAverage >= 0 && gradeAverage <40)
      {
        cellsInTable.item(7).style.backgroundColor = "red";
        cellsInTable.item(7).style.color ="white";
        console.log(cellsInTable)
      }


      cellsInTable.item(7).innerHTML = Math.round(gradeAverage) + "%";

  }
}

Кроме того, HTML, чтобы пойти с ним 

<!DOCTYPE html>
<html>
    <head>
        <title> Student Assignment Grades </title>
        <link rel="stylesheet" href="Table.css">
        <script src="getAverageFunction.js"></script>

    </head>
    <body>
        <h1> Student Assignment Grades </h1>
        <table id="gradesTable" class="gradesTable" contenteditable>
            <caption> <STRONG>Student Grades </STRONG> </caption>
            <tr>
                <th id="StudentNames" contenteditable="false">Student Names</th>
                <th id="StudentID" contenteditable="false"> Student ID</th>
                <th id="StudentResults" contenteditable="false"> Assignment 1</th>
                <th id="StudentResults" contenteditable="false"> Assignment 2</th>
                    <th id="StudentResults" contenteditable="false"> Assignment 3</th>
                    <th id="StudentResults" contenteditable="false"> Assignment 4</th>
                    <th id="StudentResults" contenteditable="false"> Assignment 5</th>
                <th id="Average" contenteditable="false"> Final Grade</th>
            </tr>
            <tr>
                <td contenteditable class="StudentName">"Your Name"</td>
                <td contenteditable class="StudentID">"Your Student Number"</td>
                <td contenteditable class="Assignment">"-"</td>
                <td contenteditable class="Assignment">"-"</td>
                <td contenteditable class="Assignment">"-"</td>
                <td contenteditable class="Assignment">"-"</td>
                <td contenteditable class="Assignment">"-"</td>
                <td contenteditable="false" class="Final Grade"> </td>
            </tr>
            <tr>
                <td contenteditable class="StudentName">"Your Name"</td>
                <td contenteditable class="StudentID">"Your Student Number"</td>
                <td contenteditable class="Assignment">"-"</td>
                <td contenteditable class="Assignment">"-"</td>
                <td contenteditable class="Assignment">"-"</td>
                <td contenteditable class="Assignment">"-"</td>
                <td contenteditable class="Assignment">"-"</td>
                <td contenteditable="false" class="Final Grade"> </td>          
            </tr>
            <tr>
                <td contenteditable class="StudentName">"Your Name"</td>
                <td contenteditable class="StudentID">"Your Student Number"</td>
                <td contenteditable class="Assignment">"-"</td>
                <td contenteditable class="Assignment">"-"</td>
                <td contenteditable class="Assignment">"-"</td>
                <td contenteditable class="Assignment">"-"</td>
                <td contenteditable class="Assignment">"-"</td>
                <td contenteditable="false" class="Final Grade"> </td>
            </tr>
            <tr>
                <td contenteditable class="StudentName">"Your Name"</td>
                <td contenteditable class="StudentID">"Your Student Number"</td>
                <td contenteditable class="Assignment">"-"</td>
                <td contenteditable class="Assignment">"-"</td>
                <td contenteditable class="Assignment">"-"</td>
                <td contenteditable class="Assignment">"-"</td>
                <td contenteditable class="Assignment">"-"</td>
                <td contenteditable="false" class="Final Grade"> </td>
            </tr>
            <tr>
                <td contenteditable class="StudentName">"Your Name"</td>
                <td contenteditable class="StudentID">"Your Student Number"</td>
                <td contenteditable class="Assignment">"-"</td>
                <td contenteditable class="Assignment">"-"</td>
                <td contenteditable class="Assignment">"-"</td>
                <td contenteditable class="Assignment">"-"</td>
                <td contenteditable class="Assignment">"-"</td>
                <td contenteditable="false" class="Final Grade"> </td>
            </tr>
            <tr>
                <td contenteditable class="StudentName">"Your Name"</td>
                <td contenteditable class="StudentID">"Your Student Number"</td>
                <td contenteditable class="Assignment">"-"</td>
                <td contenteditable class="Assignment">"-"</td>
                <td contenteditable class="Assignment">"-"</td>
                <td contenteditable class="Assignment">"-"</td>
                <td contenteditable class="Assignment">"-"</td>
                <td contenteditable="false" class="Final Grade"> </td>
            </tr>
            <tr>
                <td contenteditable class="StudentName">"Your Name"</td>
                <td contenteditable class="StudentID">"Your Student Number"</td>
                <td contenteditable class="Assignment">"-"</td>
                <td contenteditable class="Assignment">"-"</td>
                <td contenteditable class="Assignment">"-"</td>
                <td contenteditable class="Assignment">"-"</td>
                <td contenteditable class="Assignment">"-"</td>
                <td contenteditable="false" class="Final Grade"> </td>          
            </tr>
            <tr>
                <td contenteditable class="StudentName">"Your Name"</td>
                <td contenteditable class="StudentID">"Your Student Number"</td>
                <td contenteditable class="Assignment">"-"</td>
                <td contenteditable class="Assignment">"-"</td>
                <td contenteditable class="Assignment">"-"</td>
                <td contenteditable class="Assignment">"-"</td>
                <td contenteditable class="Assignment">"-"</td>
                <td contenteditable="false" class="Final Grade"> </td>
            </tr>
            <tr>
                <td contenteditable class="StudentName">"Your Name"</td>
                <td contenteditable class="StudentID">"Your Student Number"</td>
                <td contenteditable class="Assignment">"-"</td>
                <td contenteditable class="Assignment">"-"</td>
                <td contenteditable class="Assignment">"-"</td>
                <td contenteditable class="Assignment">"-"</td>
                <td contenteditable class="Assignment">"-"</td>
                <td contenteditable="false" class="Final Grade"> </td>
            </tr>
            <tr>
                <td contenteditable class="StudentName">"Your Name"</td>
                <td contenteditable class="StudentID">"Your Student Number"</td>
                <td contenteditable class="Assignment">"-"</td>
                <td contenteditable class="Assignment">"-"</td>
                <td contenteditable class="Assignment">"-"</td>
                <td contenteditable class="Assignment">"-"</td>
                <td contenteditable class="Assignment">"-"</td>
                <td contenteditable="false" class="Final Grade"> </td>
            </tr>
        </table>

        <!-- button to invoke the calculateAverage Function, styled with a coloured background -->

        <button class="btnCenter" onclick="getAverage()"> Calculate Final Grades</button>


    </body>
</html>

Ответы [ 2 ]

0 голосов
/ 01 марта 2019

Вы можете сделать что-то вроде этого: 

const targetStr = '"-"';

function colorCells() {
  var a = Array.from(document.querySelectorAll('td'));
  a.forEach(td => {
    if (td.textContent === targetStr) {
      td.style.backgroundColor = 'yellow';
    }
  });
}

function getAverage() {
  return;
}

document.addEventListener('DOMContentLoaded', colorCells);
<head>
  <title> Student Assignment Grades </title>
</head>

<body>
  <h1> Student Assignment Grades </h1>
  <table id="gradesTable" class="gradesTable" contenteditable>
    <caption>
      <STRONG>Student Grades </STRONG> </caption>
    <tr>
      <th id="StudentNames" contenteditable="false">Student Names</th>
      <th id="StudentID" contenteditable="false"> Student ID</th>
      <th id="StudentResults" contenteditable="false"> Assignment 1</th>
      <th id="StudentResults" contenteditable="false"> Assignment 2</th>
      <th id="StudentResults" contenteditable="false"> Assignment 3</th>
      <th id="StudentResults" contenteditable="false"> Assignment 4</th>
      <th id="StudentResults" contenteditable="false"> Assignment 5</th>
      <th id="Average" contenteditable="false"> Final Grade</th>
    </tr>
    <tr>
      <td contenteditable class="StudentName">"Your Name"</td>
      <td contenteditable class="StudentID">"Your Student Number"</td>
      <td contenteditable class="Assignment">"-"</td>
      <td contenteditable class="Assignment">"-"</td>
      <td contenteditable class="Assignment">"-"</td>
      <td contenteditable class="Assignment">"-"</td>
      <td contenteditable class="Assignment">"-"</td>
      <td contenteditable="false" class="Final Grade"> </td>
    </tr>
    <tr>
      <td contenteditable class="StudentName">"Your Name"</td>
      <td contenteditable class="StudentID">"Your Student Number"</td>
      <td contenteditable class="Assignment">"-"</td>
      <td contenteditable class="Assignment">"-"</td>
      <td contenteditable class="Assignment">"-"</td>
      <td contenteditable class="Assignment">"-"</td>
      <td contenteditable class="Assignment">"-"</td>
      <td contenteditable="false" class="Final Grade"> </td>
    </tr>
    <tr>
      <td contenteditable class="StudentName">"Your Name"</td>
      <td contenteditable class="StudentID">"Your Student Number"</td>
      <td contenteditable class="Assignment">"-"</td>
      <td contenteditable class="Assignment">"-"</td>
      <td contenteditable class="Assignment">"-"</td>
      <td contenteditable class="Assignment">"-"</td>
      <td contenteditable class="Assignment">"-"</td>
      <td contenteditable="false" class="Final Grade"> </td>
    </tr>
    <tr>
      <td contenteditable class="StudentName">"Your Name"</td>
      <td contenteditable class="StudentID">"Your Student Number"</td>
      <td contenteditable class="Assignment">"-"</td>
      <td contenteditable class="Assignment">"-"</td>
      <td contenteditable class="Assignment">"-"</td>
      <td contenteditable class="Assignment">"-"</td>
      <td contenteditable class="Assignment">"-"</td>
      <td contenteditable="false" class="Final Grade"> </td>
    </tr>
    <tr>
      <td contenteditable class="StudentName">"Your Name"</td>
      <td contenteditable class="StudentID">"Your Student Number"</td>
      <td contenteditable class="Assignment">"-"</td>
      <td contenteditable class="Assignment">"-"</td>
      <td contenteditable class="Assignment">"-"</td>
      <td contenteditable class="Assignment">"-"</td>
      <td contenteditable class="Assignment">"-"</td>
      <td contenteditable="false" class="Final Grade"> </td>
    </tr>
    <tr>
      <td contenteditable class="StudentName">"Your Name"</td>
      <td contenteditable class="StudentID">"Your Student Number"</td>
      <td contenteditable class="Assignment">"-"</td>
      <td contenteditable class="Assignment">"-"</td>
      <td contenteditable class="Assignment">"-"</td>
      <td contenteditable class="Assignment">"-"</td>
      <td contenteditable class="Assignment">"-"</td>
      <td contenteditable="false" class="Final Grade"> </td>
    </tr>
    <tr>
      <td contenteditable class="StudentName">"Your Name"</td>
      <td contenteditable class="StudentID">"Your Student Number"</td>
      <td contenteditable class="Assignment">"-"</td>
      <td contenteditable class="Assignment">"-"</td>
      <td contenteditable class="Assignment">"-"</td>
      <td contenteditable class="Assignment">"-"</td>
      <td contenteditable class="Assignment">"-"</td>
      <td contenteditable="false" class="Final Grade"> </td>
    </tr>
    <tr>
      <td contenteditable class="StudentName">"Your Name"</td>
      <td contenteditable class="StudentID">"Your Student Number"</td>
      <td contenteditable class="Assignment">"-"</td>
      <td contenteditable class="Assignment">"-"</td>
      <td contenteditable class="Assignment">"-"</td>
      <td contenteditable class="Assignment">"-"</td>
      <td contenteditable class="Assignment">"-"</td>
      <td contenteditable="false" class="Final Grade"> </td>
    </tr>
    <tr>
      <td contenteditable class="StudentName">"Your Name"</td>
      <td contenteditable class="StudentID">"Your Student Number"</td>
      <td contenteditable class="Assignment">"-"</td>
      <td contenteditable class="Assignment">"-"</td>
      <td contenteditable class="Assignment">"-"</td>
      <td contenteditable class="Assignment">"-"</td>
      <td contenteditable class="Assignment">"-"</td>
      <td contenteditable="false" class="Final Grade"> </td>
    </tr>
    <tr>
      <td contenteditable class="StudentName">"Your Name"</td>
      <td contenteditable class="StudentID">"Your Student Number"</td>
      <td contenteditable class="Assignment">"-"</td>
      <td contenteditable class="Assignment">"-"</td>
      <td contenteditable class="Assignment">"-"</td>
      <td contenteditable class="Assignment">"-"</td>
      <td contenteditable class="Assignment">"-"</td>
      <td contenteditable="false" class="Final Grade"> </td>
    </tr>
  </table>

  <!-- button to invoke the calculateAverage Function, styled with a coloured background -->

  <button class="btnCenter" onclick="getAverage()"> Calculate Final Grades</button>


</body>
0 голосов
/ 01 марта 2019

См. Нижнюю часть JavaScript для комментариев. 

// Get a reference to the table just once and name variables with camelCase
var table = document.getElementById('gradesTable');

// Get reference to the button and assign the click event handler
document.querySelector(".btnCenter").addEventListener("click", getAverage);

function getAverage(){    	
  // No need for counter loop. Loop over the rows array directly
  let rows = Array.prototype.slice.call(table.rows);
  rows.forEach(function(row){
  
    // Get all the Assignment cells into an array
    let cells = Array.prototype.slice.call(row.querySelectorAll(".Assignment"));
  
    // Using let and defining these in the row loop keeps the values unique for the row
    let sum = 0;
    let gradeAverage = 0;
  
    // Now just loop the cells Array
    cells.forEach(function(cell,index){
         
      // Don't use .innerHTML for strings that don't contain any HTML
      // It's wasteful and has security implications. Use .textContent instead
      var currentValue = parseInt(cell.textContent);
      if(currentValue >= 0 && currentValue <=100){
     	  sum += currentValue;     
      }
          
      // If the cell has "-" for content
      if(cell.textContent === '"-"'){
        // Apply a pre-made CSS class
        cell.classList.add("noGrade");
      } else {
        // Remove a pre-made CSS class
        cell.classList.remove("noGrade");
      }  
      
      // If this is the last cell in the row
      if(index === cells.length-1){
        gradeAverage = sum/5;
        cell.nextElementSibling.textContent = Math.round(gradeAverage) + "%";
        
        // There is a grade, so check it for low
        if(gradeAverage >= 0 && gradeAverage < 40) {
       	  cell.nextElementSibling.classList.add("lowGrade");
        } else {
          cell.nextElementSibling.classList.remove("lowGrade");
        }
      }
          
    });
  });
}
.noGrade {background-color:yellow;}
.lowGrade { background-color:red; color:white; }
<h1> Student Assignment Grades </h1>
<table id="gradesTable" class="gradesTable" contenteditable>
<caption> <STRONG>Student Grades </STRONG> </caption>
	<tr>
		<th id="StudentNames" contenteditable="false">Student Names</th>
		<th id="StudentID" contenteditable="false"> Student ID</th>
		<th id="StudentResults" contenteditable="false"> Assignment 1</th>
		<th id="StudentResults" contenteditable="false"> Assignment 2</th>
    <th id="StudentResults" contenteditable="false"> Assignment 3</th>
    <th id="StudentResults" contenteditable="false"> Assignment 4</th>
		<th id="StudentResults" contenteditable="false"> Assignment 5</th>
		<th id="Average" contenteditable="false"> Final Grade</th>
	</tr>
	<tr>
		<td contenteditable class="StudentName">"Your Name"</td>
		<td contenteditable class="StudentID">"Your Student Number"</td>
		<td contenteditable class="Assignment">"-"</td>
		<td contenteditable class="Assignment">"-"</td>
		<td contenteditable class="Assignment">"-"</td>
		<td contenteditable class="Assignment">"-"</td>
		<td contenteditable class="Assignment">"-"</td>
		<td contenteditable="false" class="Final Grade"> </td>
	</tr>
	<tr>
		<td contenteditable class="StudentName">"Your Name"</td>
		<td contenteditable class="StudentID">"Your Student Number"</td>
		<td contenteditable class="Assignment">"-"</td>
		<td contenteditable class="Assignment">"-"</td>
		<td contenteditable class="Assignment">"-"</td>
		<td contenteditable class="Assignment">"-"</td>
		<td contenteditable class="Assignment">"-"</td>
		<td contenteditable="false" class="Final Grade"> </td>			
	</tr>
	<tr>
		<td contenteditable class="StudentName">"Your Name"</td>
		<td contenteditable class="StudentID">"Your Student Number"</td>
		<td contenteditable class="Assignment">"-"</td>
		<td contenteditable class="Assignment">"-"</td>
		<td contenteditable class="Assignment">"-"</td>
		<td contenteditable class="Assignment">"-"</td>
		<td contenteditable class="Assignment">"-"</td>
		<td contenteditable="false" class="Final Grade"> </td>
	</tr>
	<tr>
		<td contenteditable class="StudentName">"Your Name"</td>
		<td contenteditable class="StudentID">"Your Student Number"</td>
		<td contenteditable class="Assignment">"-"</td>
		<td contenteditable class="Assignment">"-"</td>
		<td contenteditable class="Assignment">"-"</td>
		<td contenteditable class="Assignment">"-"</td>
		<td contenteditable class="Assignment">"-"</td>
		<td contenteditable="false" class="Final Grade"> </td>
	</tr>
	<tr>
		<td contenteditable class="StudentName">"Your Name"</td>
		<td contenteditable class="StudentID">"Your Student Number"</td>
		<td contenteditable class="Assignment">"-"</td>
		<td contenteditable class="Assignment">"-"</td>
		<td contenteditable class="Assignment">"-"</td>
		<td contenteditable class="Assignment">"-"</td>
		<td contenteditable class="Assignment">"-"</td>
		<td contenteditable="false" class="Final Grade"> </td>
	</tr>
	<tr>
		<td contenteditable class="StudentName">"Your Name"</td>
		<td contenteditable class="StudentID">"Your Student Number"</td>
		<td contenteditable class="Assignment">"-"</td>
		<td contenteditable class="Assignment">"-"</td>
		<td contenteditable class="Assignment">"-"</td>
		<td contenteditable class="Assignment">"-"</td>
		<td contenteditable class="Assignment">"-"</td>
		<td contenteditable="false" class="Final Grade"> </td>
	</tr>
	<tr>
    <td contenteditable class="StudentName">"Your Name"</td>
		<td contenteditable class="StudentID">"Your Student Number"</td>
		<td contenteditable class="Assignment">"-"</td>
		<td contenteditable class="Assignment">"-"</td>
		<td contenteditable class="Assignment">"-"</td>
		<td contenteditable class="Assignment">"-"</td>
		<td contenteditable class="Assignment">"-"</td>
		<td contenteditable="false" class="Final Grade"> </td>			
	</tr>
	<tr>
		<td contenteditable class="StudentName">"Your Name"</td>
		<td contenteditable class="StudentID">"Your Student Number"</td>
		<td contenteditable class="Assignment">"-"</td>
		<td contenteditable class="Assignment">"-"</td>
		<td contenteditable class="Assignment">"-"</td>
		<td contenteditable class="Assignment">"-"</td>
		<td contenteditable class="Assignment">"-"</td>
		<td contenteditable="false" class="Final Grade"> </td>
	</tr>
	<tr>
		<td contenteditable class="StudentName">"Your Name"</td>
		<td contenteditable class="StudentID">"Your Student Number"</td>
		<td contenteditable class="Assignment">"-"</td>
		<td contenteditable class="Assignment">"-"</td>
		<td contenteditable class="Assignment">"-"</td>
		<td contenteditable class="Assignment">"-"</td>
		<td contenteditable class="Assignment">"-"</td>
		<td contenteditable="false" class="Final Grade"> </td>
	</tr>
	<tr>
		<td contenteditable class="StudentName">"Your Name"</td>
		<td contenteditable class="StudentID">"Your Student Number"</td>
		<td contenteditable class="Assignment">"-"</td>
		<td contenteditable class="Assignment">"-"</td>
		<td contenteditable class="Assignment">"-"</td>
		<td contenteditable class="Assignment">"-"</td>
		<td contenteditable class="Assignment">"-"</td>
		<td contenteditable="false" class="Final Grade"> </td>
	</tr>
</table>
    
<!-- Don't set up events with inline HTML event attributes like onclick.
     Separate your JavaScript from your HTML and do that work in JavaScript -->
<button class="btnCenter"> Calculate Final Grades</button>
...