Geek Answers Handbook

Show / Hide colspan on a specific line at the click of a button

I have a problem, I need to show / hide colspaneach column when the link is clicked.

That is, I have a lot of entries, and when you click on any specific information, you need to show this information on colspan, when another entry is clicked, hide the previously clicking entry.

My HTML is:

<table class="table table-condensed table-bordered table-hover text-center">

    <thead>
        <tr>
            <th>#</th>
            <th>Name</th>
            <th>Price</th>
            <th>Date</th>
            <th>Details</th>
        </tr>
    </thead>

    <tbody> 
        <?php foreach ($products as $row): ?>
            <tr>
                <td>1</td>
                <td>Product 1</td>
                <td>10000</td>
                <td>Date</td>
                <td><a href="#" class="show" id="1">Show details</a></td>
            </tr>
            <tr>
                <td>2</td>
                <td>Product 2</td>
                <td>100</td>
                <td>Date</td>
                <td><a href="#" class="show" id="2">Show details</a></td>
            </tr>
            <tr>
                <td colspan="5">Details of selected product</td>
            </tr>
        <?php endforeach; ?>
    <tbody>
</table>

I had this code, but always brought me the first entry:

$('.show').click(function(){
    $(this).parent().parent().next().toggle('slow');
    var id = $(this).attr('id');
    $('td #colspanid').append(id); //show id
    return false;
});
+4
source share
3 answers

If you need a specific line to switch, you can use eq

jQuery(document).ready(function($){
    $('.show').on('click', function(e){
         e.preventDefault();
         // Put row index in eq
         $('.table tr').eq(2).toggle();
    })
})

Or, if you want to switch the next tr, check out this jsfiddle I created.

Hope this helps you.

0

.

 $('.show').click(function(){
var element1=$(this);
$('.previous').addClass('hide');
element1.parent().parent().addClass('previous'); 

    var id = element1.attr('id');
    $('td#colspn').text('Details of selected product is :' +id); //show id
    return false;
});

css:

.hide{
display:none;
}

html .

$('.show').click(function(){
var element1=$(this);
$('.previous').addClass('hide');
element1.parent().parent().addClass('previous'); 

    var id = element1.attr('id');
    $('td#colspn').text('Details of selected product is :' +id); //show id
    return false;
});
.hide{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<table class="table table-condensed table-bordered table-hover text-center">

    <thead>
        <tr>
            <th>#</th>
            <th>Name</th>
            <th>Price</th>
            <th>Date</th>
            <th>Details</th>
        </tr>
    </thead>

    <tbody> 
       
            <tr>
                <td>1</td>
                <td>Product 1</td>
                <td>10000</td>
                <td>Date</td>
                <td><a href="#" class="show" id="1">Show details</a></td>
            </tr>
            <tr>
                <td>2</td>
                <td>Product 2</td>
                <td>100</td>
                <td>Date</td>
                <td><a href="#" class="show" id="2">Show details</a></td>
            </tr>
			<tr>
                <td>3</td>
                <td>Product 1</td>
                <td>10000</td>
                <td>Date</td>
                <td><a href="#" class="show" id="3">Show details</a></td>
            </tr>
            <tr>
                <td>4</td>
                <td>Product 2</td>
                <td>100</td>
                <td>Date</td>
                <td><a href="#" class="show" id="4">Show details</a></td>
            </tr>
            <tr>
                <td id="colspn" colspan="5">Details of selected product</td>
            </tr>
       
    <tbody>
</table>
Hide result
0

, .

<tbody> 
    <?php foreach ($products as $row): ?>
        <tr>
            <td><?php echo $row[0] ?></td>
            <td><?php echo $row[1] ?></td>
            <td><?php echo $row[2] ?></td>
            <td><?php echo $row[3] ?></td>
            <td><a href="#" class="show" id="<?php echo $row[0] ?>">Show details</a></td>
        </tr>
        <tr class="details">  <!-- <<<<< class="details" -->
            <td colspan="5">Details of selected product</td>
        </tr>
    <?php endforeach; ?>
<tbody>

Then jQuery will look like this:

$(function() {
    $("tr.details").hide().closest("tbody").find("a.show").on('click', function(e) {
        e.preventDefault();//prevent hyperlink action
        $("tr.details").slideUp('fast');//hide any previously opened details
        $(this).closest("tr").next("tr.details").slideDown('fast');//show details for the clicked row
    });
});
0
source

More articles:


All Articles