如何使用jQuery隐藏表行

How to hide table row using jQuery

本文关键字:隐藏 jQuery 何使用      更新时间:2023-09-26

我从数据库中得到一些值,我想在一个正在工作的表中显示主题,但如果值==0,我想删除或隐藏ROW怎么办?我不知道该怎么做。。。请帮我一下:

这是我的HTML代码

 <table class="table table-bordered" id ="">
                            <tr>
                                <th>Type</th><th>days</th>
                            <tr> 
                                <td class="lavorato">
                                    Lavorato
                                </td>
                                <td class="lavorato_detail">
                                    ...
                                </td>
                            </tr>
                            <tr> 
                                <td class="ferie">
                                    Ferie
                                </td>
                                <td class="ferie_detail">
                                    ...
                                </td>
                            </tr> </table>

这是我的Json

$(document).ready(function(){
$('.btn-modal').click(function() {
    var idts = $(this).data("idts");
    $('.lavorato_detail, .permesso_detail, .ferie_detail, .malattia_detail, .aspettativa_detail, .nonretribuito_detail').html('...');
    if(idts == "")
    {
        $('#details').modal();
        return false;
    }
    $.ajax({
        url: 'count.php', 
        type: "POST",
        data: "idts="+idts,
        success: function(data)
        {
            dataArray = jQuery.parseJSON(data);
            $.each(dataArray , function(i, v) {
                switch(v['desc'])
                {
                    case 'Lavorato':
                    $('.permesso_detail').html(v['sum_permesso']+ ' Ore');
                    $('.lavorato_detail').html(v['count_giorno']);
                    break;
                    case 'Ferie': // here i want to add changes 
                    $('.ferie_detail').html(v['count_giorno']);
                    break;

                }
            });
            $('#details').modal();
        },
    });
});

});

例如,我想说:::case'Ferie':If==0{在HTML中隐藏与Ferie相关的所有行}else{做其他事情}

$('.ferie_detail').parents("tr:first").hide();

试试这个。。。。

尝试以下代码

$.each($("#tableDemo tbody").find(".ferie"), function() {
        if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) == "ferie")
           $(this).hide();
        else
             $(this).show();                
    });

请确保将表id指定为id="tableDemo"

您可以使用它。

$('.ferie_detail').parent().hide();

我建议设置表的id,但如果这不是您想要的,这一行就可以了。

$('body>table>tbody>tr:nth child(3)').hide();

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>hide demo</title> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> </head> <table class="table table-bordered" id =""> <tr> <th>Type</th><th>days</th> <tr> <td class="lavorato"> Lavorato </td> <td class="lavorato_detail"> ... </td> </tr> <tr> <td class="ferie"> Ferie </td> <td class="ferie_detail"> ... </td> </tr> </table> </html>

希望这能有所帮助