يقوم Jquery بتوسيع صف الجدول المخفي عند النقر فوق الزر

لدي جدول تم إنشاؤه من خلال 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();}
    });
});
0
لماذا تستخدم $ (this) .find ('. child1'). show ()؛ ؟ ماذا تفعل طريقة .find() ؟ من المرجح أن تساعدك الإجابة عن هذا السؤال في حل مشكلتك.
وأضاف المؤلف VTodorov, مصدر

1 إجابة

جرب هذا

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$(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>
</div> </div>
0
وأضاف