다른 테이블 ID를 사용하여 두 개의 html 테이블을 표시하고 싶습니다. 하나의 테이블을 표시 할 수 있지만 두 번째 테이블을 표시 할 수없고 오류가 발생한 위치를 파악할 수 없습니다.
코드는 다음과 같습니다.
var $container = $("#container");
var $row = $("#container table tbody tr");
// Loop through items in JSON data..
var $button = $("<button>" + 'xyz' + "</button>");
$container.prepend($button);
var table = $("<table1>");
table.append($("<tr><th>column1</th><th>column2</th></tr>"));
// Button click handler..
$button.on("click", function(e) {
e.preventDefault();
for( var i=0; i<2; i++) {
// Replace row HTML..
//parent row
var row=$('<tr ><td>' + 'data' + '</td>' + + '<td>' + "" + '</td></tr>');
table.append(row);
for(var j =0; j<2; j++) {
var row=$('<tr><td>' + "" + '</td></tr>');
$('<td>data</td>')
.on('click', function() {
//I want to display table2 when clicked on col2 data
var table = $("<table2>");
table.append($("<tr><th>col1</th><th>col2</th></tr >"));
var row=$('<tr><td>' + 'data' + '</td>' + + '<td>' + "" + '</td></tr>');
table.append(row);
})
.appendTo(row);
table.append(row);
$("#table2").html(table);
}
}
$("#table1").html(table);
// Show table if it's not already visible..
});#table2 {
margin-top: 20px;
border-collapse: collapse;
border: 1px solid silver;
width: 500px;
}
#table1 {
margin-top: 20px;
border-collapse: collapse;
border: 1px solid silver;
width: 500px;
}
#table1 th {
border: 1px solid black;
text-align: left;
}
#table1 td {
border: 1px solid black;
text-align: left;
}
#table1 tr {
background-color: #f2f2f2;
}
button {
margin-left: 15px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="table1">
</div>
</div>
<div id="table2">
</div>column2의 값을 클릭하면 두 번째 테이블을 표시하고 싶습니다. 이 문제를 해결하는 방법을 알려주세요. 다음은 전체 코드입니다. https://jsfiddle.net/gaurav10022/styjk9vr/48/
먼저 click마지막 열의 적용 이벤트 뒤에 테이블 열 값을 추가해야합니다 .
아래 코드를 시도하거나 JSFiddle을 통해 이동 하십시오.
var $container = $("#container");
var m = ['data','data1'];
// Loop through items in JSON data..
var $button = $("<button>" + 'xyz' + "</button>");
$container.prepend($button);
var table = $("<table>");
table.append($("<tr><th>column1</th><th>column2</th></tr>"));
// Button click handler..
$button.on("click", function(e) {
e.preventDefault();
for (var i = 0; i < 2; i++) {
// Replace row HTML..
//parent row
var row = $('<tr ><td>' + 'data' + '</td><td>' + "" + '</td></tr>');
table.append(row);
for (var j = 0; j < 2; j++) {
//child row
var row = $('<tr><td>' + "" + '</td><td>' + m[j] + '</td></tr>');
$(row).find('td:last').on('click', function() {
// second table
var tempData = $(this).text();
var table2 = $("<table>");
table2.append($("<tr><th>col1</th><th>col2</th></tr >"));
var row = $('<tr class="parent_row" ><td>' + tempData + '</td>' + +'<td>' + "" + '</td></tr>');
table2.append(row);
$("#table2").html(table2);
})
table.append(row);
}
}
$("#table1").html(table);
// Show table if it's not already visible..
});#table2 {
margin-top: 20px;
border-collapse: collapse;
border: 1px solid silver;
width: 500px;
}
#table1 {
margin-top: 20px;
border-collapse: collapse;
border: 1px solid silver;
width: 500px;
}
#table1 th {
border: 1px solid black;
text-align: left;
}
#table1 td {
border: 1px solid black;
text-align: left;
}
#table1 tr {
background-color: #f2f2f2;
}
button {
margin-left: 15px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="table1">
</div>
</div>
<div id="table2">
</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다