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

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>

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

注意:之所以需要以这种不稳定/hacky 的方式完成，是因为我们正在使用的系统。不是选择:)

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>