javascript - 如何将表行值注入两个单独的表

Question

目前我有一个动态表，它使用表单（django）将查询值输入数据库

当表格已填满信息时（有 7 列，但其中 5 列不可见，尽管有值），我想知道我该怎么做，当我从表格中选择一行或更多时，值该行的“注入”到另外两个单独的表中。

如果从第一个表中只选择了一行，则将值注入到另外两个表中，如果从第一个表中选择了两行，则将值注入到 4 个表中（每个选定行 2 个表）。

标签： javascriptjquery

Answer 1

您可以简单地遍历checked复选框，然后使用.closest("tr")从选中的复选框中获取最接近 tr 的引用，然后用于.find("td:eq(1/*these values can change */)").text()获取 td 值并将这些值添加到输入框并将其附加到您的表中。

演示代码：

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