列内のセルのラジオボタンの選択に基づいて入力の表示を切り替える

Question

HTMLテーブルの列にあるすべてのセルの内容をラジオボタンとテキスト入力に置き換えました。テキスト入力は、その行に対して選択されたラジオボタンが「拒否」されている場合にのみ表示されます。

現在、私のコードは次のとおりです。

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

あなたはラジオボタンで「拒否」を選択し、このコードを実行する場合は、テキスト入力が、その内のすべてのセルをで表示します。カラム。行ごとに個別に表示するには、テキスト入力が必要です。どうすればこれを達成できますか？

注：これは、この厄介な/ハッキーな方法で行う必要がある理由は、私たちが使用しているシステムのためです。希望このことができます

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

：選択:)

Answer 1

によってあなたは次のように、現在の変更ラジオボタンと関連inputを選択するために、siblings()メソッドを使用することができません。

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