Schaltet die Anzeige der Eingabe basierend auf der Optionsfeldauswahl einzeln für Zellen in Spalte

Question

um

Ich ersetzte den Inhalt aller Zellen in einer Spalte einer HTML-Tabelle durch Optionsfelder und eine Texteingabe. Die Texteingabe sollte nur angezeigt werden, wenn der für diese Zeile ausgewählte Optionsschalter "abgelehnt" ist.

Derzeit ist mein Code:

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

Wenn Sie diesen Code ausführen, wenn Sie "abgelehnt" mit den Radiobuttons, die Texteingabe, dass jede Zelle angezeigt in wird Säule. Ich brauche die Texteingabe für jede Zeile einzeln anzuzeigen. Wie kann ich das erreichen?

Hinweis: Der Grund, warum dies in diesem wackeligen/hacky Weg getan werden muss, ist wegen des Systems, das wir verwenden. Nicht durch Wahl :)

Answer 1

könnten Sie siblings() Methode verwenden, die im Zusammenhang mit dem aktuellen input geändert Optionsfeld zu wählen, wie:

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

Hoffnung, das hilft.

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