首先,我将从中获取表的配置代码。
<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”,然后按OK按钮创建一个新表。
下面是我尝试的代码。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>")
}
}
})
})
我想像下面的图片一样实现。多谢您的协助。
根据您对问题和提供的图像的理解,我创建了一个样本。请检查一下。
$(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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句