Javascript PHP/jQuery-脚本无法在表中每一行的单元格中工作_Javascript_Php_Jquery_Onclick

Javascript PHP/jQuery-脚本无法在表中每一行的单元格中工作

javascript php jquery

Javascript PHP/jQuery-脚本无法在表中每一行的单元格中工作,javascript,php,jquery,onclick,Javascript,Php,Jquery,Onclick,我有一个带有动态创建行的表。在最后一列的每一行中，我需要一个按钮来显示/隐藏您按下按钮的那一行下不可见的行我有一个代码，但按钮显示/隐藏在第一行和下一行工作，没有任何反应这是我的密码： <!DOCTYPE html> <html> <head> <script type="text/javascript" src="jquery-1.9.1.js"></script> <script> $(fun

我有一个带有动态创建行的表。在最后一列的每一行中，我需要一个按钮来显示/隐藏您按下按钮的那一行下不可见的行

我有一个代码，但按钮显示/隐藏在第一行和下一行工作，没有任何反应

这是我的密码：

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="jquery-1.9.1.js"></script>
    <script>
    $(function () {
        $('#show_more').on('click',function(){
            var id_item = $(".btn").attr( "id-data" );
            $('.hidden_row_'+id_item).addClass('hidden_row_sh').removeClass('hidden_row_hide');
            $("#wh_tbl tr.hidden_row_"+id_item).fadeIn(400);
            $(this).hide();
            $('#show_less').show();
        });
        $('#show_less').on('click',function(){
            var id_item = $(".btn").attr( "id-data" );
            $('.hidden_row_'+id_item).addClass('hidden_row_hide').removeClass('hidden_row_sh');
            $("#wh_tbl tr.hidden_row_"+id_item).fadeOut(400);
            $(this).hide();
            $('#show_more').show();
        });
    });
    </script>
    <style>
    table.ranking-table, tr, td, th {
        border-collapse:collapse;
    }
    .hidden_row_hide {
        display:none;
    }
    .hidden_row_sh {
        display:table-row;
    }
    #show_more .sign:after {
        content:"⇩";
    }
    #show_less .sign:after {
        content:"⇧";
    }
    button.btn {
        font-weight: bold;
        color: #666;
        width:100%;
        background:none;
        border:none;
    }
    button.btn:focus {
        outline:0;
    }
    </style>
</head>
<body>

<table id="wh_tbl" class="ranking-table" border="1">
    <thead>
        <tr>
            <th>#</th>
            <th style="text-align:center;">th_col2</th>
            <th style="text-align:center;">th_col3</th>
            <th style="text-align:center;">th_col4</th>
            <th style="text-align:center;">th_col5</th>
            <th style="text-align:center;">th_col6</th>
            <th style="text-align:center;">th_col7</th>
        </tr>
    </thead>
    <tbody>
    <?php 
    for($i = 0; $i <= 10; $i++)
    {
        echo '
        <tr>
            <td>'.$i.'</td>
            <td style="text-align:center;">Text_'.$i.'</td>
            <td style="text-align:center;">data_'.$i.'</td>
            <td style="text-align:center;">web_'.$i.'</td>
            <td style="text-align:center;">xxx_'.$i.'</td>
            <td style="text-align:center;">yyy_'.$i.'</td>
            <td style="text-align:center;">
                <div id="show_more">
                    <button class="btn" id-data="'.$i.'" >Pokaż <span class="sign"></span></button>
                </div>
                <div id="show_less" class="hidden_row_hide">
                    <button class="btn" id-data="'.$i.'" >Ukryj <span class="sign"></span></button>
                </div>
            </td>
        </tr>
        <tr class="hidden_row_'.$i.' hidden_row_hide">
            <td></td>
            <td>col'.$i.'1</td>
            <td>col'.$i.'2</td>
            <td>col'.$i.'3</td>
            <td>col'.$i.'4</td>
            <td>col'.$i.'5</td>
            <td>col'.$i.'6</td>
        </tr>';
    }
    ?>
    </tbody>
</table>
</body>
</html>


$（函数（）{
$（“#显示更多”）。在（'单击'，函数（）上{
变量id_项=$（“.btn”）.attr（“id数据”）；
$（'.hidden_row_'+id_item）.addClass（'hidden_row_sh'）.removeClass（'hidden_row_hide'）；
$（“#wh#tbl tr.hidden_urow_uu”+id_item）.fadeIn（400）；
$（this.hide（）；
$（'show#less'）.show（）；
});
$（'show#less'）。在（'click'，function（）上{
变量id_项=$（“.btn”）.attr（“id数据”）；
$（'.hidden_row_'+id_item）.addClass（'hidden_row_hide'）.removeClass（'hidden_row_sh'）；
$（“#wh#tbl tr.hidden_urow_uuu”+id_u项）。淡出（400）；
$（this.hide（）；
$（'show#u more'）.show（）；
});
});
表1.排名表，tr，td，th{
边界塌陷：塌陷；
}
.隐藏\u行\u隐藏{
显示：无；
}
.hidden_row_sh{
显示：表格行；
}
#显示更多。签名：之后{
内容：“⇩";
}
#少显示。符号：后{
内容：“⇧";
}
button.btn{
字体大小：粗体；
颜色：#666；
宽度：100%；
背景：无；
边界：无；
}
按钮。btn：焦点{
大纲：0；
}
#
THU col2
泰克
第四章
th_col5
th_col6
第七章

每个元素需要有唯一的

id

，因此将

id

更改为

class

，如下所示：-

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
    $(function () {
        $('.show_more').on('click',function(){
            $(this).closest('tr').next('tr').removeClass('hidden_row_hide');
            $(this).hide();
            $(this).next('.show_less').show();
        });
        $('.show_less').on('click',function(){
            $(this).closest('tr').next('tr').addClass('hidden_row_hide');
            $(this).hide();
            $(this).prev('.show_more').show();
        });
    });
    </script>
    <style>
    table.ranking-table, tr, td, th {
        border-collapse:collapse;
    }
    .hidden_row_hide {
        display:none;
    }
    .hidden_row_sh {
        display:table-row;
    }
    .show_more .sign:after {
        content:"⇩";
    }
    .show_less .sign:after {
        content:"⇧";
    }
    button.btn {
        font-weight: bold;
        color: #666;
        width:100%;
        background:none;
        border:none;
    }
    button.btn:focus {
        outline:0;
    }
    </style>
</head>
<body>

<table id="wh_tbl" class="ranking-table" border="1">
    <thead>
        <tr>
            <th>#</th>
            <th style="text-align:center;">th_col2</th>
            <th style="text-align:center;">th_col3</th>
            <th style="text-align:center;">th_col4</th>
            <th style="text-align:center;">th_col5</th>
            <th style="text-align:center;">th_col6</th>
            <th style="text-align:center;">th_col7</th>
        </tr>
    </thead>
    <tbody>
    <?php 
    for($i = 0; $i <= 10; $i++)
    {
        echo '
        <tr>
            <td>'.$i.'</td>
            <td style="text-align:center;">Text_'.$i.'</td>
            <td style="text-align:center;">data_'.$i.'</td>
            <td style="text-align:center;">web_'.$i.'</td>
            <td style="text-align:center;">xxx_'.$i.'</td>
            <td style="text-align:center;">yyy_'.$i.'</td>
            <td style="text-align:center;">
                <div class="show_more">
                    <button class="btn" id-data="'.$i.'" >Pokaż <span class="sign"></span></button>
                </div>
                <div class="show_less hidden_row_hide">
                    <button class="btn" id-data="'.$i.'" >Ukryj <span class="sign"></span></button>
                </div>
            </td>
        </tr>
        <tr class="hidden_row_'.$i.' hidden_row_hide">
            <td></td>
            <td>col'.$i.'1</td>
            <td>col'.$i.'2</td>
            <td>col'.$i.'3</td>
            <td>col'.$i.'4</td>
            <td>col'.$i.'5</td>
            <td>col'.$i.'6</td>
        </tr>';
    }
    ?>
    </tbody>
</table>
</body>
</html>


$（函数（）{
$（'.show_more'）。在（'单击'，函数（）上）{
$（this）.closest（'tr'）.next（'tr'）.removeClass（'hidden_row_hide'）；
$（this.hide（）；
$（this）.next（'.show_less'）.show（）；
});
$（'.show_less'）。在（'单击'，函数（）上）{
$（this）.closest（'tr'）.next（'tr'）.addClass（'hidden_row_hide'）；
$（this.hide（）；
$（this.prev（'.show_more'）.show（）；
});
});
表1.排名表，tr，td，th{
边界塌陷：塌陷；
}
.隐藏\u行\u隐藏{
显示：无；
}
.hidden_row_sh{
显示：表格行；
}
.给你看更多。签名：之后{
内容：“⇩";
}
.少显示。符号：后{
内容：“⇧";
}
button.btn{
字体大小：粗体；
颜色：#666；
宽度：100%；
背景：无；
边界：无；
}
按钮。btn：焦点{
大纲：0；
}
#
THU col2
泰克
第四章
th_col5
th_col6
第七章

id在文档上下文中必须是唯一的您需要每个元素都有唯一的

id

。