Basculer l'affichage de l'entrée en fonction de la sélection du bouton radio individuellement pour les cellules de la colonne

Question

J'ai remplacé le contenu de toutes les cellules d'une colonne d'un tableau HTML par des boutons radio et une entrée de texte. La saisie de texte ne devrait s'afficher que si le bouton radio sélectionné pour cette ligne est "rejeté".

Actuellement, mon code est:

$(document).ready(function() { 
 
    var $table = $("table.tables.list"); 
 
    if ($table.length > 0) { 
 
    var qc_statusTh = $("th.headersub:contains('QC Status')"); 
 
    var qc_statusColumnIndex = $(qc_statusTh).index(); 
 
    var qc_statusRows = $($table).find('tr'); 
 
    $(qc_statusRows).each(function() { 
 
     $(this).find('td').eq(qc_statusColumnIndex).replaceWith("<td class='sub'><div class='radio-form'><form action=''><input type='radio' name='qc-status' value='approved'> Approved<br><input type='radio' name='qc-status' value='rejected'> Rejected<input style='display:none;' type='text' name='qc-status' class='qc-status-text'/></form></div></td>"); 
 
    }); 
 
    $("input[type='radio']").change(function() { 
 
     if ($(this).val() == "rejected") { 
 
     $(".qc-status-text").show(); 
 
     } else { 
 
     $(".qc-status-text").hide(); 
 
     } 
 
    }); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<table class="tables list"> 
 
    <thead> 
 
    <th class="headersub">qc_example</th> 
 
    <th class="headersub">qc_status</th> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>Ok</td> 
 
    </tr> 
 
    <tr> 
 
     <td>2</td> 
 
     <td>Ok</td> 
 
    </tr> 
 
    <tr> 
 
     <td>3</td> 
 
     <td>Error</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Si vous exécutez ce code, lorsque vous sélectionnez « rejeté » avec les boutons radio, l'entrée de texte affiche dans toutes les cellules qui colonne. J'ai besoin de l'entrée de texte à afficher sur une base individuelle par rangée. Comment puis-je accomplir cela?

Note: La raison pour laquelle cela doit être fait de cette manière bidon/hacky est à cause du système que nous utilisons. Non par choix :)

Answer 1

Vous pouvez utiliser siblings() méthode pour sélectionner le input lié avec le bouton radio changé en cours, comme:

if ($(this).val() == "rejected") { 
    $(this).siblings(".qc-status-text").show(); 
}else{ 
    $(this).siblings(".qc-status-text").hide(); 
} 

Hope this helps.

$(document).ready(function() { 
 
    var $table = $("table.tables.list"); 
 
    if ($table.length > 0) { 
 
    var qc_statusTh = $("th.headersub:contains('QC Status')"); 
 
    var qc_statusColumnIndex = $(qc_statusTh).index(); 
 
    var qc_statusRows = $($table).find('tr'); 
 
    $(qc_statusRows).each(function() { 
 
     $(this).find('td').eq(qc_statusColumnIndex).replaceWith("<td class='sub'><div class='radio-form'><form action=''><input type='radio' name='qc-status' value='approved'> Approved<br><input type='radio' name='qc-status' value='rejected'> Rejected<input style='display:none;' type='text' name='qc-status' class='qc-status-text'/></form></div></td>"); 
 
    }); 
 
    $("input[type='radio']").change(function() { 
 
     if ($(this).val() == "rejected") { 
 
     $(this).siblings(".qc-status-text").show(); 
 
     }else{ 
 
     $(this).siblings(".qc-status-text").hide(); 
 
     } 
 
    }); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<table class="tables list"> 
 
    <thead> 
 
    <th class="headersub">qc_example</th> 
 
    <th class="headersub">qc_status</th> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>Ok</td> 
 
    </tr> 
 
    <tr> 
 
     <td>2</td> 
 
     <td>Ok</td> 
 
    </tr> 
 
    <tr> 
 
     <td>3</td> 
 
     <td>Error</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

$(document).ready(function() { 
 
    var $table = $("table.tables.list"); 
 

 
     $table.find('td:odd').replaceWith("<td class='sub'><div class='radio-form'><form action=''><input type='radio' name='qc-status' value='approved'> Approved<br><input type='radio' name='qc-status' value='rejected'> Rejected<input style='display:none;' type='text' name='qc-status' class='qc-status-text'/></form></div></td>"); 
 
    
 
    $("input[type='radio']").change(function() { 
 
     $(".qc-status-text", $(this).parent()).toggle(this.value=="rejected"); 
 
    }); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<table class="tables list"> 
 
    <thead> 
 
    <th class="headersub">qc_example</th> 
 
    <th class="headersub">qc_status</th> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>Ok</td> 
 
    </tr> 
 
    <tr> 
 
     <td>2</td> 
 
     <td>Ok</td> 
 
    </tr> 
 
    <tr> 
 
     <td>3</td> 
 
     <td>Error</td> 
 
    </tr> 
 
    </tbody> 
 
</table>