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

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>