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

Question

我用单选按钮和文本输入替换了HTML表格列中所有单元格的内容。只有在为该行选择的单选按钮被拒绝＆＃34;。

时，才会显示文本输入

目前，我的代码是：

＆＃13;

＆＃13;

$(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();
      }
    });
  }
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如果您运行此代码，当您选择＆＃34;拒绝＆＃34;使用单选按钮，文本输入将显示在该列的每个单元格中。我需要每行显示单独显示的文本输入。我怎么能做到这一点？

注意：这种需要以这种不稳定/黑客的方式完成的原因是因为我们正在使用的系统。不是选择:)）

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>