How to inject a table row values into two separate tables

Question

Currently I have a dynamic table that takes the values of queries to the database using forms (django)

When the table has been filled with information (there are 7 columns, but 5 of them are not visible despite having values), I would like to know how can I do so that when I select a row from the table or more, the values of the row are 'injected' into two other separate tables.

If only one row is selected from the first table, the values will be injected into two other tables, if two rows are selected from the first table then the values will be injected into 4 tables (2 tables for each selected row).

Answer 1

You can simply loop through checked checkboxes and then using .closest("tr") get reference of closest tr from that checked checkboxes then use .find("td:eq(1/*these values can change */)").text() to get td values and add these values to input boxes and append same to your tables.

Demo Code :

$(function() {

  $("input.select-all").click(function() {
    var checked = this.checked;
    $("input.select-item").each(function(index, item) {
      item.checked = checked;
    });
  });

  //column checkbox select all or cancel
  $("button#show-selected ,button#select-all").click(function() {
    show_All();
  });

  function show_All() {
    var html = "";
    var html1 = "";
    //loop through checked checkboxes
    $("#searchVariantTable tbody input[type=checkbox]:checked").each(function(index, item) {
      var selector = $(this).closest("tr") //get closest tr
      //generate htmls 
      html1 += `<tr>
            <td><input id="gene_2" type="text" class="form-control" placeholder="loremipsum" value="${selector.find('td:eq(1)').text()}" readonly/></td><td><input id="variant_2" type="text" class="form-control" placeholder="loremipsum" value="${selector.find("td:eq(2)").text()}" readonly/></td>
          </tr>`

      html += `<tr>
            <td><input type="text" class="form-control" placeholder="loremipsum" value="${selector.find("td:eq(3)").text().trim()}" readonly/></td>
            <td><input  type="text" class="form-control" placeholder="loremipsum"  value="${selector.find("td:eq(4)").text().trim()}" readonly/></td>
            <td><input  type="text" class="form-control" placeholder="loremipsum"   value="${selector.find("td:eq(5)").text().trim()}" readonly/></td>
            <td><input  type="text" class="form-control" placeholder="loremipsum"  value="${selector.find("td:eq(6)").text().trim()}" readonly/></td>
            <td><input  type="text" class="form-control" placeholder="loremipsum"  value="${selector.find("td:eq(7)").text().trim()}" readonly/></td>
          </tr>`
    });
    $("#secondTable1").html(html1)
    $("#secondTable2").html(html)
  }
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<div class="container">
  <div class="row" id="searchVariantTable">
    <div class="col">
      <table class="table table-hover mt-5">
        <thead class="variants-table-thead">
          <tr>
            <th class="active">
              <input type="checkbox" class="select-all checkbox" name="select-all" />
            </th>
            <th>Gene</th>
            <th>Variant</th>
            <th style="display: none;"></th>
            <th style="display: none;"></th>
            <th style="display: none;"></th>
            <th style="display: none;"></th>
            <th style="display: none;"></th>
          </tr>
        </thead>
        <!--The <tr> are populated dynamically after form submit, I just added some dummy values.
            BACKEND: (Python-Django) -->
        <tbody class="variants-table-tbody">
          <tr>
            <td class="active">
              <input id="selectedGene" type="checkbox" class="select-item checkbox" name="select-item" />
            </td>
            <td class="success">Gene1</td>
            <td class="warning">Variant1</td>
            <td style="display: none;"> #1 value1</td>
            <td style="display: none;"> #2 value1</td>
            <td style="display: none;"> #3 value1</td>
            <td style="display: none;"> #4 value1</td>
            <td style="display: none;"> #5 value1</td>
          </tr>
          <tr>
            <td class="active">
              <input id="selectedGene" type="checkbox" class="select-item checkbox" name="select-item" />
            </td>
            <td class="success">Gene2</td>
            <td class="warning">Variant2</td>
            <td style="display: none;"> #1 value2</td>
            <td style="display: none;"> #2 value2</td>
            <td style="display: none;"> #3 value2</td>
            <td style="display: none;"> #4 value2</td>
            <td style="display: none;"> #5 value2</td>
          </tr>
        </tbody>
      </table>
      <button id="select-all" class="btn btn-primary">Select all</button>
      <button id="show-selected" class="btn btn-primary">Show selected</button>
    </div>
  </div>
  <div class="row">
    <div class="col-6">
      <table class="table mt-5">
        <thead class="variants-table-thead">
          <tr>
            <th style="text-align:center;">Gene</th>
            <th style="text-align:center;">Variant</th>
          </tr>
        </thead>
        <tbody class="variants-table-tbody" id="secondTable1">
          <!--data will come here -->
        </tbody>
      </table>
    </div>
    <div class="col-6">
      <div style="text-align: center;">
        <h5>Genomic coordinate</h5>
      </div>
      <table class="table mt-4">
        <thead class="variants-table-thead">
          <tr>
            <th style="text-align:center;">Opt #1</th>
            <th style="text-align:center;">Opt #2</th>
            <th style="text-align:center;">Opt #3</th>
            <th style="text-align:center;">Opt #4</th>
            <th style="text-align:center;">Opt #5</th>
          </tr>
        </thead>
        <tbody class="variants-table-tbody" id="secondTable2">
          <!--data will come here -->
        </tbody>
      </table>
    </div>
  </div>
</div>