Hiding all rows after a row click with a certain class

Question

I have a table with rows with different classes. What I want is that if a breakrow is clicked then all the data rows beneath it are either shown if they are hidden or hidden if they are shown. Here is an example of the table:

I found a stackoverflow thread with exactly what i needed but when i try to implement it it doesn't work. Any help would be awesome

Here is my HTML page. My table is dynamically generated.

$(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>

Please post a [minimal, complete and verifiable example](https://stackoverflow.com/help/mcve) to get an answer to your problem. — ggorlen, Jul 28 '18 at 18:25
I tried to fix your snippet. Please make it look like it should — mplungjan, Jul 28 '18 at 18:53
If your table is dynamic then you need to delegate the clicks — mplungjan, Jul 28 '18 at 18:54

score 1 · Accepted Answer · answered Jul 28 '18 at 18:51

In your case, the rows which are equivalent to the .first-level rows in the SO thread you linked are of the class .breakrow. You may also want to toggle a class such as "hide" rather than "slow", since you're toggling whether they're hidden. Thus

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

should be rewritten as

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

This will toggle the class of "hide" on the correct rows. Then in your CSS you could implement the .hide class like

.datarow.hide {
  display: none;
}

Just a note that you also currently have

.datarow {
  display: none;
}

in your CSS, and you may want to remove that so that they are only hidden when they have a class of .hide. You can initialize them with the class of .hide on them if you want them hidden when the table loads.

Hope that helps!

PS - also note that the snippet of HTML you posted is missing a couple closing tags, </tbody> and </table :)

`$('table').on("click",".breakrow",function() { $(this).nextUntil('.breakrow').toggle("hide"); });` if dynamic — mplungjan, Jul 28 '18 at 20:35

score 0 · Answer 2 · answered Jul 28 '18 at 18:26

It seems that you are just missing the jQuery script tag.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

$(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/2.1.1/jquery.min.js"></script>
<table>
<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>
   </tbody>
   </table>
   <button id="gobutton">
   Go
   </button>

i have the script tag in my main html. Im new to posting to stack overflow and i forgot to put it up. My table content is automatically generated and so i only put up the table. Made an edit and i have it up. — Maharshi Patel, Jul 28 '18 at 18:33
@MaharshiPatel Then what is the problem with the code? What is the expected result? — Unmitigated, Jul 28 '18 at 18:38
when the table is generated, clicking the breakrow rows doesnt do anything. — Maharshi Patel, Jul 28 '18 at 18:41

Hiding all rows after a row click with a certain class

2 Answers2