Enhance your table design with customized styling using css and jquery

Question

Enhance your table design with customized styling using css and jquery

I am trying to create a webpage with an expandable and collapsible table using HTML, but I am facing some issues. Below is the code snippet I have used:

var $headers = $('.header').click(function() {
  $(this).find('span').text(function(_, value) {
    return value == '-' ? '+' : '-'
  });
  $(this).nextUntil('tr.header').slideToggle(100, function() {}); 
});
$headers.find('span').text('+')
$('table tr:not(.header)').hide()

table,
tr,
td,
th {
  border: 1px solid black;
  border-collapse: collapse;
}
tr.header {
  cursor: pointer;
}

<table border="0">
  <tr class="header">
    <th colspan="2">Header <span>-</span>
    </th>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr class="header">
    <th colspan="2">Header <span>-</span>
    </th>
  </tr>
  <tr>
    <td>date</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
</table>

I am experiencing difficulties as my code seems to not be functioning correctly. Can someone please help me identify the issue in my file?

html jquery css

Answer 1

Answer №1

To implement this style, you need to add the following script at the bottom of your code:

<head>
<style type="text/css">
    table, tr, td, th 
    {
    border: 1px solid black;
    border-collapse:collapse;
    }
    tr.header {
    cursor:pointer;
    }
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

</head>
<table border="0">
    <tr class="header">
        <th colspan="2">Header <span>-</span>
        </th>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
    </tr>
    <tr class="header">
        <th colspan="2">Header <span>-</span>
        </th>
    </tr>
    <tr>
        <td>date</td>
        <td>data</td>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
    </tr>
</table>
<script type="text/javascript">  
     var $headers = $('.header').click(function () {
    $(this).find('span').text(function (_, value) {
        return value == '-' ? '+' : '-'
    });
    $(this).nextUntil('tr.header').slideToggle(100, function () {});
    });
    $headers.find('span').text('+')
    $('table tr:not(.header)').hide()
</script> 
<body>

Alternatively, you can place the script inside aready function:

Here's how you can do it:

<script type="text/javascript">  
$(document).ready(function(){
     var $headers = $('.header').click(function () {
    $(this).find('span').text(function (_, value) {
        return value == '-' ? '+' : '-'
    });
    $(this).nextUntil('tr.header').slideToggle(100, function () {});
    });
    $headers.find('span').text('+')
    $('table tr:not(.header)').hide()    
})

</script>

Answer 2

To implement this style, you need to add the following script at the bottom of your code:

<head>
<style type="text/css">
    table, tr, td, th 
    {
    border: 1px solid black;
    border-collapse:collapse;
    }
    tr.header {
    cursor:pointer;
    }
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

</head>
<table border="0">
    <tr class="header">
        <th colspan="2">Header <span>-</span>
        </th>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
    </tr>
    <tr class="header">
        <th colspan="2">Header <span>-</span>
        </th>
    </tr>
    <tr>
        <td>date</td>
        <td>data</td>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
    </tr>
</table>
<script type="text/javascript">  
     var $headers = $('.header').click(function () {
    $(this).find('span').text(function (_, value) {
        return value == '-' ? '+' : '-'
    });
    $(this).nextUntil('tr.header').slideToggle(100, function () {});
    });
    $headers.find('span').text('+')
    $('table tr:not(.header)').hide()
</script> 
<body>

Alternatively, you can place the script inside aready function:

Here's how you can do it:

<script type="text/javascript">  
$(document).ready(function(){
     var $headers = $('.header').click(function () {
    $(this).find('span').text(function (_, value) {
        return value == '-' ? '+' : '-'
    });
    $(this).nextUntil('tr.header').slideToggle(100, function () {});
    });
    $headers.find('span').text('+')
    $('table tr:not(.header)').hide()    
})

</script>

Answer 3

Answer №2

Simply insert your code within $(document).ready(function({}). View the DEMO

$(document).ready(function(){ 
    /// your code here
});

To learn more about the ready() function, click HERE

Answer 4

Simply insert your code within $(document).ready(function({}). View the DEMO

$(document).ready(function(){ 
    /// your code here
});

To learn more about the ready() function, click HERE

Enhance your table design with customized styling using css and jquery

Answer №1

Answer №2

Similar questions

What is the best way to relocate a form to the top of the page

What is causing the incorrect size of <input type='range'/> in relation to content flow?

Deactivate a particular function key with the help of jQuery

Defining variables within a jQuery function

The menu is not displaying the correct list style

Troubles with concealing dropdown menu when hovering

Is it possible to eliminate the css class prefix when using Modular css in React?

Having trouble getting smooth scrolling with easing to function properly

Combining rows with identical IDs within an array of objects

Using jQuery to reconstruct a list from a group of div elements

How can I toggle the visibility of a div based on whether a variable is defined or not?

Ways to prevent the submitted post from disappearing upon reloading in HTML

"Utilizing Bootstrap to create proper spacing between elements within a

Using Angular 2 to bind to a formControl in a Select2 multiple selection scenario

How come my Bootstrap 4 navbar-brand is occupying an entire row?

The vertical scrolling feature seems to be disabled for ng-repeat within the Angular view

Height constraint disregarded by anchor

Personalize product image

Jquery Gallery Snapshots

Unlocking the Potential of Larger jQuery Icons