jquery - 当我点击 中的复选框时，我想获取所有匹配该值的 并打印出来

Question

首先，我将从中获取值的表的配置代码。

<table id="sum_table" border="1">
  <tr>
    <c:forEach var="colName" items="${rData.get(j).colNames}">
      <c:forEach var="colNameValue" items="${colName}">
        <th><input class="chkCol" name="chkColnames"
          type="checkbox">
          <label class="chkCol" for="chkColnames">${colName}</label></th>
      </c:forEach>
    </c:forEach>
  </tr>
  <c:forEach var="i" begin="0" end="${fn:length(rData.get(j).data[0])-1}">
    <c:if test="${i le 1000}">
      <c:set var="row" value="${rData.get(j).data}" />
      <tr>
        <c:forEach var="data" items="${row}">
          <td>${data[i]}</td>
        </c:forEach>
      </tr>
    </c:if>
  </c:forEach>
</table>

生成的表格有一个复选框来检查 TH 的文本。如果创建表，就是这种类型的代码。

<table id="sum_table" border="1">
  <tr>
    <th>
      <input class="chkCol" name="chkColnames" type="checkbox">
      <label class="chkCol" for="chkColnames">CUST_ID</label>
    </th>
    <th>
      <input class="chkCol" name="chkColnames" type="checkbox">
      <label class="chkCol" for="chkColnames">DIVIDED_SET</label>
    </th>
    <th>
      <input class="chkCol" name="chkColnames" type="checkbox">
      <label class="chkCol" for="chkColnames">SIU_CUST_YN</label>
    </th>
  </tr>
  <tr>
    <td>1</td>
    <td>1</td>
    <td>0</td>
  </tr>
  <tr>
    <td>2</td>
    <td>1</td>
    <td>0</td>
  </tr>

我想在此表中创建一个 jquery 脚本来检查列名“TH”，然后按“确定”按钮创建一个新表。

下面是我试过的代码。 TH 输出很好，但 TD 没有输出。‘#col_table’为检查值新建表的ID，‘#sum_table’为取值的表。

$("#confirm").click(function() {

  var str = "";
  var list = $("input[name=chkColnames]:checked");
  var str2 = "";

  $("#selectCol").show();
  $("#col_table > thead > tr > th").remove();
  $("#col_table > tbody > tr > td").remove();

  for(var i=0; i<list.length; i++){
    str = $(list[i]).next().text();
      $("#col_table > thead > tr").append("<th>" + str + "</th>");
  }

  $("input[name=chkColnames]:checked").each(function(i,elements){

    index = ($(elements).index("input[name=chkColnames]"));
    //console.log(index);

    for(var k=0; k<5; k++) {
      var list2 = $("#sum_table > tbody > tr:nth-child(1)").nextAll().eq(k).children().eq(index);
      $("#col_table > tbody").append("<tr></tr>")
      console.log(list2.length)

      for(var j=0; j<list2.length; j++) {
        str2 = list2.text();
        $("#col_table > tbody > tr").append("<td>" + str2 + "</td>")
      }
    }
  })
})

我想实现如下图。非常感谢您的帮助。

Answer 1

我根据我对您提供的问题和图像的理解创建了一个示例。请检查这个。

$(document).on('click', '#btn_generate', function() {
  var index = [];
  $('#tbl_Child').html('');
  // Finding checked checkboxes and adding them to an array
  $('#tbl_Main thead tr input[type=checkbox]:checked').each(function() {
    index.push($(this).closest('th').index());
    //console.log($(this).closest('th').text());
    //console.log($(this).closest('th').index());
  });
  //creating thead with only contents from checked th's
  var thead = $('<thead>');
  $('#tbl_Main thead tr th').each(function() {
    if (jQuery.inArray($(this).index(), index) !== -1) {
      thead.append($('<th>' + $(this).text() + '</th>'));
    }
  });

  //creating thead with only contents from checked th's corresponding td's
  var tbody = $('<tbody>');
  $('#tbl_Main tbody tr').each(function() {
    var tr = $('<tr>');
    $(this).find('td').each(function() {
      if (jQuery.inArray($(this).index(), index) !== -1) {
        tr.append($('<td>' + $(this).text() + '</td>'));
      }
    });
    tbody.append(tr);
  });
  $('#tbl_Child').append(thead);
  $('#tbl_Child').append(tbody);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl_Main">
  <thead>
    <tr>
      <th><input type="checkbox" />A</th>
      <th><input type="checkbox" />B</th>
      <th><input type="checkbox" />C</th>
      <th><input type="checkbox" />D</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>01</td>
      <td>02</td>
      <td>03</td>
      <td>04</td>
    </tr>
    <tr>
      <td>11</td>
      <td>12</td>
      <td>13</td>
      <td>14</td>
    </tr>
    <tr>
      <td>21</td>
      <td>22</td>
      <td>23</td>
      <td>24</td>
    </tr>
  </tbody>
</table>
<input type="submit" id="btn_generate" value="Generate" />
<br />
<table id="tbl_Child">
</table>