Jquery развернуть скрытую строку таблицы при нажатии кнопки - PullRequest
Новая
       20

Jquery развернуть скрытую строку таблицы при нажатии кнопки

0 голосов
/ 25 апреля 2018

У меня есть таблица, сгенерированная через 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>';
?>

Код Jquery 

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

1 Ответ

0 голосов
/ 25 апреля 2018

Попробуйте это 

$(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>
...