根据列中单元格的单选按钮选择切换显示输入

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>

如果你运行这段代码，当你选择“拒绝”与单选按钮，输入文本会在每一个单元格中显示的柱。我需要文本输入以每行单独显示。我怎样才能做到这一点？

注意：这个需要以这种无法无天的方式完成的原因是因为我们使用的系统。没有选择的余地:)

Answer 1

你可以使用siblings()方法来选择相关input与当前改变单选按钮，如：

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

希望这有助于。

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