Concealing every row subsequent to a clicked row featuring a specific class

Question

Concealing every row subsequent to a clicked row featuring a specific class

Is there a way to toggle the display of data rows in a table by clicking on a break row? The desired functionality is to show hidden rows and hide shown rows. Here's an example of the table:

I came across a helpful discussion on StackOverflow that provides exactly what I need, but I'm having trouble implementing it successfully. Any assistance would be greatly appreciated.

Below is my dynamically generated HTML page with the table structure:

$(document).ready(function() {
  $("#gobutton").click(function() {
    var userText = $("#inputText").val();
    var data = processRawData(userText);
    // additional processing steps

    // creating table string with dynamic content
    var tableString = '';

    // appending final table output
    $("#gradesTable").append(tableString);
  });

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


// Additional JavaScript functions

// CSS code snippet for table styling
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>
      <!-- Table rows will be dynamically added here -->

  </table>
</div>

javascript html css

Answer 1

Answer №1

If you take a look at the rows that are equivalent to the first-level rows in the discussion thread you shared on Stack Overflow, they belong to the class .breakrow. Instead of using "slow", consider toggling a class like "hide" since you're essentially hiding and showing them. Here's how you can adapt the code:

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

You should modify it this way:

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

This will effectively toggle the class of "hide" for the relevant rows. To support this in your CSS, define the .hide class like so:

.datarow.hide {
  display: none;
}

Note that you currently have the following rule in your CSS:

.datarow {
  display: none;
}

You may want to remove it so that the rows are only hidden when they have the .hide class. If you wish for the rows to be initially hidden when the table loads, add the .hide class to them upon initialization.

I hope this explanation helps!

PS - Also, remember that the HTML snippet you provided is missing some closing tags, including </tbody> and </table> :)

Answer 2

If you take a look at the rows that are equivalent to the first-level rows in the discussion thread you shared on Stack Overflow, they belong to the class .breakrow. Instead of using "slow", consider toggling a class like "hide" since you're essentially hiding and showing them. Here's how you can adapt the code:

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

You should modify it this way:

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

This will effectively toggle the class of "hide" for the relevant rows. To support this in your CSS, define the .hide class like so:

.datarow.hide {
  display: none;
}

Note that you currently have the following rule in your CSS:

.datarow {
  display: none;
}

You may want to remove it so that the rows are only hidden when they have the .hide class. If you wish for the rows to be initially hidden when the table loads, add the .hide class to them upon initialization.

I hope this explanation helps!

PS - Also, remember that the HTML snippet you provided is missing some closing tags, including </tbody> and </table> :)

Answer 3

Answer №2

Looks like you just need to add 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()

// Code continues...

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>
   <!-- Additional table rows here -->
   </tbody>
   </table>
   <button id="gobutton">
   Go
   </button>

Answer 4

Looks like you just need to add 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()

// Code continues...

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>
   <!-- Additional table rows here -->
   </tbody>
   </table>
   <button id="gobutton">
   Go
   </button>

Concealing every row subsequent to a clicked row featuring a specific class

Answer №1

Answer №2

Similar questions

When trying to run a jQuery function on click or load events, an error message stating that

Utilize React to iterate through a dictionary and display each entry

How come React-Native isn't displaying successfully retrieved data using Axios?

Initiate Jquery Modal Using JavaScript

Aligning a Bootstrap button beneath text that is centered on the page

Unable to add items to the global JavaScript array variable

Having trouble getting Owl Carousel to function properly within an AngularJS partial view?

Sorting tables in React based on checkbox inputs

transferring a PHP object between two PHP files containing HTML code

Dealing with full-width elements on mobile devices

Creating compound functions using a series of arrow functions

Preventing window.load events from firing in JavaScript

Is there a way to dynamically showcase a collection of arrays?

Stop the form from submitting when the enter key is pressed using VueJS and Semantic UI

WordPress CSS & JS files failing to enqueue properly

Methodically generate various instances of a customized hook to enhance store entities with extra functionalities

Create a new array by applying a filtering function to the provided data in JavaScript using React

Mastering Bootstrap: Achieving flawless column stacking in succession

Place the block at the bottom without using absolute positioning

Establishing the httppostedfilebase variable when validation is unsuccessful in an ASP.Net MVC view