HTML таблица и JavaScript addRows и addColumns без jQuery? - PullRequest
Новая
       4

HTML таблица и JavaScript addRows и addColumns без jQuery?

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

У меня проблема с получением кнопок в моей таблице оценок учеников, у меня есть кнопка для вычисления среднего значения оценок с помощью функции getAverage (), у меня есть одна для вставки строк в таблицу с помощью функцииназывается insert_Rows, и, наконец, один для добавления столбцов с помощью функции insert_Column ().

Моя проблема заключается в том, что ни один из них, похоже, не работает, и я не могу понять, почему функция getAverage работала, пока я не добавилдве другие кнопки.

Это назначение, в котором я не могу использовать jQuery.

Кроме того, это краткое описание двух кнопок:

  1. Кнопка в стиле CSS, которая вставляет новую строку таблицы, подходящую для записи новых данных ученика.Вы можете вставить после последней строки таблицы.Студенты должны предоставить кнопку, которая сохраняет таблицу в ее текущем состоянии, т. Е. Если имеется 5 строк и 6 ячеек, файл cookie должен отражать это.

  2. Кнопка стиля CSS, которая вставляет новую таблицустолбец подходит для записи новых данных оценки присвоения.Этот столбец требует заголовка.Вы можете решить, как вы хотите выполнить распределение заголовков (автоматическое, редактирование контента и т. Д.).Должна быть еще одна кнопка, которая затем извлекает эти данные и заполняет их обратно в таблицу в том состоянии, в котором они находились ранее.Если были добавлены дополнительные строки или столбцы, таблица должна вернуться к своему предыдущему состоянию при сохранении файла cookie (5 строк и 6 ячеек).

Кроме того, для дополнительного кредита, яПри необходимости использовать JavaScript и любой другой метод, выбранный мной для удаления строки данных, выбранной пользователем, и другой метод для удаления столбца назначения, выбранного пользователем, функция должна обеспечивать обновление итоговых итоговых значений столбца после этого удаления. 

// get the average
function getAverage()
{
    let table = document.getElementById("gradesTable");  
    //Loop over the rows array directly
  let rows = Array.prtotype.slice.call(table.rows); //let is block scoped - can only be used in this block
  rows.froEach(function(row)
  {
    let cells = array.protoype.slice.call(row.querySelectorAll(".Assignment")); // Get all the Assignment cells into an array

    // declairing sum and gradeAverage with let and by defining them in the row loop keeps the values unique for each row
    let sum = 0; 
    let gradeAverage = 0;

    // Now just loop the cells Array
    cells.forEach(function(cell,index){

     //.textContent instead for strings that dont contain any values
      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");
        }
      }

    });
  });

}

// add a row to the table
function insert_Row() {
  let table = document.getElementById("gradesTable"); //assign table id to a variable
  let tableRows = table.rows.length; // gives how many rows in the table
  let row = table.insertRow(tableRows); //insert after the last row in the table
  let cellsInTable = document.getElementById("gradesTable").rows[0].cells 
  let columnTotal = cellsInTable.length; //assign the columnTotal the number of columns that the first row has

  //loop through each column
  for(let i = 0; i < columnTotal; i++)
  {
    //add a new cell for each column
    let cell = row.insertCell(i);

    //assign each new cell the default value "-"
    cell.innerHTML = "-";


  }

}

// add a column to the HTML table
function appendColumn() 
{
    let table = document.getElementById("gradesTable"); // table reference

    // open loop for each row and append cell
    for(let x = 0; x < table.rows.length; x++)
    {
        createCell(tbale.rows[x].insertCell(table.rows[x].cells.lenght), x, "col");
    }      
}


function insert_Column()
{

}
function deleteColumn()
{
    let allRows = document.getElementById("gradesTable").rows;
    for (var i=0; i < allRows.length; i++) 
  {
        if (allRows[i].cells.length > 1) 
    {
            allRows[i].deleteCell(-1);
        }
    }
}

Исправление: функция вставки строки, кажется, работает правильно, но функция среднего балла не работает, и я не знаю, с чего начать писать другие функции.

Если кто-нибудьможете предложить совет или лучшие места для изучения?Поскольку мой лектор только что сообщил нам об использовании W3Schools, а он не учит нас языку, я просто чувствую себя не в своей тарелке.

...