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

Question

我用单选按钮和文本输入替换了 HTML table 列中所有单元格的内容。只有当该行的单选按钮 select 为 "rejected".

时，文本输入才应显示

目前我的代码是：

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

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

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

Answer 1

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

Answer 2

您可以使用 siblings() 方法来 select 与当前更改的单选按钮相关的 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>

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

Toggle display of input based on radio button selection individually for cells in column

javascript

jquery

html-table

textinput