javascript - 连续点击某个类别后隐藏所有行

标签 javascript html css

<分区>

我有一个表格，其中包含不同类别的行。我想要的是，如果单击一个断行，则它下面的所有数据行要么在隐藏时显示，要么在显示时隐藏。这是表格的示例:

我发现了一个stackoverflow thread正是我所需要的，但是当我尝试实现它时它不起作用。任何帮助都会很棒

这是我的 HTML 页面。我的表格是动态生成的。

$(document).ready(function() {
  $("#gobutton").click(function() {
    var userText = $("#inputText").val();
    var data = processRawData(userText);
    data = getAllData(data);
    data = data.sort()

    // extract all unique years
    var years = [];
    years = extractUniqueYears(years, data);

    // extract all unique semesters
    var semsetersUn = [];
    semsetersUn = extractUniqueSemesters(semsetersUn, data);

    var cumulative = [];
    cumulative = calculateCumulativeGPA(cumulative, data);

    var yearly = [];
    yearly = calculateYearlyGPA(yearly, data, years);

    var semesterly = [];
    semseterly = calculateSemesterlyGPA(semesterly, data, semsetersUn);

    console.log(cumulative);
    console.log(yearly);
    console.log(semseterly);

    tableString = '<table>' + createTableHeaders();

    for (var i = 0; i < yearly.length; i++) {
      tableString = tableString + createYearRow(yearly[i][0], yearly[i][1], yearly[i][2], yearly[i][3]);
      for (var j = 0; j < semseterly.length; j++) {
        if (semseterly[j][4] == yearly[i][4]) {
          tableString = tableString + createSemesterRow(semseterly[j][0], semseterly[j][1], semseterly[j][2], semseterly[j][3]);
        }
      }
    }
    console.log(tableString);
    tableString = tableString + '</tbody></table>';
    $("#gradesTable").append(tableString);
  });

  $('.first-level').click(function() {
    $(this).nextUntil('.first-level').toggle("slow");
  });


});



function getAllData(data) {
  data = getTwelvePoint(data);
  data = isIncluded(data);
  data = addAcademicYear(data);
  data = addSemester(data);
  data = calculateCredits(data)
  data = convertUnits(data);
  return data;
}

function processRawData(rawData) {
  var format = /[A-Z]+ +(.*)+\n+(.*)+\n+(.*)+\n+(.*)+\n+(.*)+\n+(.*)+/gm;
  var courses = [];
  while ((row = format.exec(rawData)) !== null) {
    var entry = row[0].split('\n');
    courses.push(entry);
  }
  return courses;
}

function getTwelvePoint(courses) {
  for (var i = 0; i < courses.length; i++) {
    // get the Twelve Point grade from the letter grade
    var grade = courses[i][3];
    if (grade == 'A+') {
      courses[i].push(12);
    } else if (grade == 'A') {
      courses[i].push(11);
    } else if (grade == 'A-') {
      courses[i].push(10);
    } else if (grade == 'B+') {
      courses[i].push(9);
    } else if (grade == 'B') {
      courses[i].push(8);
    } else if (grade == 'B-') {
      courses[i].push(7);
    } else if (grade == 'C+') {
      courses[i].push(6);
    } else if (grade == 'C') {
      courses[i].push(5);
    } else if (grade == 'C-') {
      courses[i].push(4);
    } else if (grade == 'D+') {
      courses[i].push(3);
    } else if (grade == 'D') {
      courses[i].push(2);
    } else if (grade == 'D-') {
      courses[i].push(1);
    } else {
      courses[i].push(0);
    }
  }

  return courses;
}

function isIncluded(courses) {
  for (var i = 0; i < courses.length; i++) {
    if ((courses[i][5] == 'In Progress') || (courses[i][3] == 'NC') || (courses[i][3] == 'COM') || (courses[i][5] == 'Transferred')) {
      courses[i].push(false);
    } else {
      courses[i].push(true);
    }
  }

  return courses;
}

function addAcademicYear(courses) {
  for (var i = 0; i < courses.length; i++) {
    if (courses[i][2].substring(5, 9) == 'Fall') {
      courses[i].push(parseInt(courses[i][2].substring(0, 4)));
    } else {
      courses[i].push(parseInt(courses[i][2].substring(0, 4)) - 1);
    }
  }

  return courses;
}

function addSemester(courses) {
  for (var i = 0; i < courses.length; i++) {
    var semsester = courses[i][2].split(' ');
    courses[i].push(semsester[1]);
  }
  return courses;
}

function extractUniqueYears(years, courses) {
  for (var i = 0; i < courses.length; i++) {
    if (courses[i][2].substring(5, 9) == 'Fall') {
      years.push(parseInt(courses[i][2].substring(0, 4)));
    } else {
      years.push(parseInt(courses[i][2].substring(0, 4)) - 1);
    }
  }

  years = Array.from(new Set(years));
  return years;
}

function extractUniqueSemesters(semesters, courses) {
  for (var i = 0; i < courses.length; i++) {
    semesters.push(courses[i][2]);
  }
  semesters = Array.from(new Set(semesters));
  semseters = semesters.sort();
  return semesters;
}

function calculateCredits(courses) {
  for (var i = 0; i < courses.length; i++) {
    courses[i].push(courses[i][4] * courses[i][6]);
  }
  return courses;
}

function convertUnits(courses) {
  for (var i = 0; i < courses.length; i++) {
    courses[i][4] = parseFloat(courses[i][4]);
  }
  return courses;
}

function calculateCumulativeGPA(cumulative, courses) {
  //calculate final gpa
  totalCredits = 0;
  totalUnits = 0.0;
  for (var l = 0; l < courses.length; l++) {
    if (courses[l][7] == true) {
      totalUnits = totalUnits + parseInt(courses[l][4]);
      totalCredits = totalCredits + courses[l][10];
    }
  }
  cumulative = ['Cumulative', totalUnits.toString(), totalCredits.toString(), ((totalCredits / totalUnits).toFixed(2)).toString()];
  return cumulative;
}

function calculateYearlyGPA(yearly, courses, years) {
  var finalData = [];
  //calculate yearly gpa
  var totalCredits = 0;
  var totalUnits = 0.0;

  for (var j = 0; j < years.length; j++) {
    totalCredits = 0;
    totalUnits = 0;
    for (var k = 0; k < courses.length; k++) {
      if ((courses[k][8] == years[j]) && courses[k][7] == true) {
        totalUnits = totalUnits + parseInt(courses[k][4]);
        totalCredits = totalCredits + courses[k][10];
      }
    }
    finalData[j] = [years[j].toString() + '-' + (years[j] + 1).toString(), totalUnits.toString(), totalCredits.toString(), ((totalCredits / totalUnits).toFixed(2)).toString()];

  }

  for (var i = 0; i < finalData.length; i++) {
    finalData[i].push(parseInt(finalData[i][0]));
  }

  yearly = finalData;
  return yearly;
}

function calculateSemesterlyGPA(semesterly, courses, semesters) {
  var finalData = [];
  //calculate yearly gpa
  var totalCredits = 0;
  var totalUnits = 0.0;

  for (var j = 0; j < semseters.length; j++) {
    totalCredits = 0;
    totalUnits = 0;
    for (var k = 0; k < courses.length; k++) {
      if ((courses[k][2] == semesters[j]) && courses[k][7] == true) {
        totalUnits = totalUnits + parseInt(courses[k][4]);
        totalCredits = totalCredits + courses[k][10];
      }
    }
    finalData[j] = [semesters[j], totalUnits.toString(), totalCredits.toString(), ((totalCredits / totalUnits).toFixed(2)).toString()];

  }

  finalData = academicYearID(finalData);

  semesterly = finalData.sort();
  return semesterly;
}


function academicYearID(data) {
  for (var i = 0; i < data.length; i++) {
    if (data[i][0].substring(5, 9) == 'Fall') {
      data[i].push(parseInt(data[i][0].substring(0, 4)));
    } else {
      data[i].push(parseInt(data[i][0].substring(0, 4)) - 1);
    }
  }
  return data;
}

function createTableHeaders() {
  return '<thead><tr class="tableheader"><th>Time Period</th><th>Units Taken</th><th>Credits Earned</th><th>GPA</th></tr></thead><tbody>'
}

function createYearRow(TimePeriod, Units, Credits, grade) {
  return '<tr class="breakrow"><td>' + TimePeriod.toString() + '</td><td>' + Units.toString() + '</td><td>' + Credits.toString() + '</td><td>' + grade.toString() + '</td></tr>';

}

function createSemesterRow(TimePeriod, Units, Credits, grade) {
  return '<tr class="datarow"><td>' + TimePeriod.toString() + '</td><td>' + Units.toString() + '</td><td>' + Credits.toString() + '</td><td>' + grade.toString() + '</td></tr>';
}
table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  padding: 8px;
  text-align: center;
  border-bottom: 1px solid #ddd;
}

tr:hover {
  background-color: #f5f5f5;
}

.datarow {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="Header">
  <h1>Learning Query</h1>
</div>
<div class="container">
  <textarea type="text" class="form-control" rows="11" id="inputText" placeholder="Paste Here"></textarea>
  <button type="button" id="gobutton">Go</button>
  <table id='gradesTable'>

    <thead>
      <tr class="tableheader">
        <th>Time Period</th>
        <th>Units Taken</th>
        <th>Credits Earned</th>
        <th>GPA</th>
      </tr>
    </thead>
    <tbody>
      <tr class="breakrow">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr class="datarow">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr class="datarow">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr class="breakrow">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr class="datarow">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr class="datarow">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr class="breakrow">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr class="datarow">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr class="datarow">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr class="breakrow">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr class="datarow">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr class="datarow">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>

  </table>
</div>

最佳答案

在您的例子中，相当于 SO thread you linked 中的 .first-level 行的行属于 .breakrow 类。您可能还想切换一个类，例如“隐藏”而不是“慢速”，因为您正在切换它们是否隐藏。因此

$('.first-level').click(function() {
  $(this).nextUntil('.first-level').toggle("slow");
});

应该重写为

$('.breakrow').click(function() {
  $(this).nextUntil('.breakrow').toggle("hide");
});

这将在正确的行上切换“隐藏”类。然后在你的 CSS 中你可以像这样实现 .hide 类

.datarow.hide {
  display: none;
}

请注意，您目前也有

.datarow {
  display: none;
}

在您的 CSS 中，您可能希望删除它，以便它们仅在具有 .hide 类时隐藏。如果您希望在加载表时隐藏它们，您可以使用 .hide 类对其进行初始化。

希望对您有所帮助!

PS - 另请注意，您发布的 HTML 片段缺少几个结束标记，</tbody>和 </table :)

关于javascript - 连续点击某个类别后隐藏所有行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51574029/

上一篇：javascript - 将 Parent Div 收缩为 Foated Children

下一篇：css - 针对一个 HTML 元素的多个类使用什么 CSS 选择器？

相关文章：

javascript - 如何在没有白色闪烁的情况下在背景上创建全屏淡入淡出幻灯片？

javascript - 一页中的 jquery 表单验证和 php 脚本

html - CSS 内容 slider 元素符号预览

android - IBM Worklight - 应用程序在不同的 Android 操作系统版本中显示和行为不同

jquery - 如何以编程方式将链接状态更改为 :active?

javascript - 有没有一种简单的方法可以将自定义类添加到 jQuery-ui Datepicker 的所有元素？

javascript - 将网格行值绑定(bind)到 htmleditor

javascript - Javascript:嵌套函数中的切换 bool 值未更改

javascript - jQuery 删除功能不起作用

jquery - 选择同一父级的所有先前子级

©2024 IT工具网  联系我们