Jquery 在按钮单击时展开隐藏的表格行

debugcn 发表于 Dev

安德森

我有一个通过 PHP/mysql 生成的表。在每一行的末尾是按钮。根据单击的按钮，我希望只为单击按钮的行显示相关的隐藏行。

HTML 源代码

<?php
if ($result = mysqli_query($link, $query)) {
    while ($row = mysqli_fetch_array($result)) {
    echo    
        '<tbody>
            <tr class="parent"> 
                <td align="left">'. $row['reference'] . '</td>
                <td align="left">'. $row['animal'] . '</td>
                <td><input type="button" name="ownorwant" value="own"></td>
                <td><input type="button" name="ownorwant" value="want"></td>
            </tr>'; 
    echo    '<tr style="display: none;" class="child1"> 
                <td><input type="button" name="size" value="big" /></td>
                <td><input type="button" name="size" value="small" /></td>
            </tr>';
    echo    '<tr style="display: none;" class="child2">   
                <td><input type="button" name="food" value="meat" /></td>
                <td><input type="button" name="food" value="veg" /></td>
            </tr>';    
    echo    '<tr style="display: none;" class="child3"> 
                <td><input type="submit" name="save" value="save" /></td>
            </tr>
        </tbody>';
?>

查询代码

$('.ownorwant').on('click', function(){
    var val =$(this).val();
    if (val === "own"){
        $( this ).find('.child1').show();}
    else{
        $( this ).find('.child3').show();}
    });
});

Anfath Hifans

试试这个

$(document).on('click', 'input[name="ownorwant"]', function(){
    if($(this).val() == 'own'){
        $(this).closest('tbody').find('.child1').show();
    }else{
        $(this).closest('tbody').find('.child3').show();
    }
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tbody>
        <tr class="parent">
            <td><input type="button" name="ownorwant" value="own"></td>
            <td><input type="button" name="ownorwant" value="want"></td>
        </tr>
        <tr style="display: none;" class="child1"> 
            <td><input type="button" name="size" value="big" /></td>
            <td><input type="button" name="size" value="small" /></td>
        </tr>
        <tr style="display: none;" class="child3"> 
            <td><input type="submit" name="save" value="save" /></td>
        </tr>
    </tbody>
    <tbody>
        <tr class="parent">
            <td><input type="button" name="ownorwant" value="own"></td>
            <td><input type="button" name="ownorwant" value="want"></td>
        </tr>
        <tr style="display: none;" class="child1"> 
            <td><input type="button" name="size" value="big" /></td>
            <td><input type="button" name="size" value="small" /></td>
        </tr>
        <tr style="display: none;" class="child3"> 
            <td><input type="submit" name="save" value="save" /></td>
        </tr>
    </tbody>
</table>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。