CODEWITHSUNDEEP
javascriptjqueryhtml-tabletextinput
Liz
Liz

Reputation: 1048

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

I replaced the contents of all cells in a column of an HTML table with radio buttons and a text input. The text input should only display if the radio button selected for that row is "rejected".

Currently, my code is:

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

If you run this code, when you select "rejected" with the radio buttons, the text input will display in every cell in that column. I need the text input to display on an individual basis per row. How can I accomplish this?

Note: The reason this needs to be done in this wonky/hacky way is because of the system we are using. Not by choice :)

Upvotes: 1

Views: 567

Answers (2)

Kevin Bowersox
Kevin Bowersox

Reputation: 94439

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

Upvotes: 0

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

You could use siblings() method to select the related input with the current changed radio button, like :

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

Hope this helps.

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

Upvotes: 2

Related Questions