我想要一個表格（table1）根據用戶在輸入表單中輸入的數字顯示 n 次。然后對于這個表的每個實體，用戶應該能夠點擊每一行，并且應該顯示另一個相關的表。
到目前為止，我可以根據用戶輸入生成 table1 n 次。但是隨后函式 myFunction_disease 僅適用于 table1 的第一次迭代。我希望 table1 的每個副本都根據用戶單擊的內容獨立控制。
這是 jsfiddle：https ://jsfiddle.net/k0x4y6d2/1/
<div class="user_input_outer" id="num_of_conditions">
<div class= "content_text"> Number of conditions:</div>
<div class="user_input">
<input type="number" id="numb_conditions" onchange="myFunction_num_conditions();" min="2" max="1"> </div>
</div>
<div id=condition_detail>
</div>
function myFunction_num_conditions(x) {
container = document.getElementById('numb_conditions')
var number = container.value
for (var i = 0; i < number; i ) {
count = i 1
document.getElementById("condition_detail").innerHTML = 'Condition' (i 1);
let newdiv = document.createElement('div');
newdiv.innerHTML = "<table id=table1 class=table> <tr onclick='myFunction_disease(this)'><td>cardiac </td></tr> <tr onclick='myFunction_disease(this)'><td> respiratory </td></tr> <tr onclick='myFunction_disease(this)'><td>infection</td></tr></table><table id=table2 class=table> <tr onclick='myFunction_cardiac(this)'><td>MI </td></tr> <tr onclick='myFunction_cardiac(this)'> <td> valve disease </td></tr> <tr 'myFunction_cardiac(this)'><td>CCF</td></tr></table> <table id=table3 class=table> <tr onclick='myFunction_respiratory(this)'><td>COPD </td></tr> <tr onclick='myFunction_respiratory(this)'><td> asthma </td></tr> <tr onclick='myFunction_respiratory(this)'><td>bronchiectasis</td></tr></table><table id=table4 class=table> <tr onclick='myFunction_infectious(this)'><td>TB </td></tr> <tr onclick='myFunction_infectious(this)'><td> pneumonia </td></tr> <tr onclick='myFunction_infectious(this)'><td>cellulitis</td></tr></table>"
document.getElementById('condition_detail').appendChild(newdiv);
}
}
function myFunction_disease(x) {
const disease = document.querySelector("#table1");
const cardiac = document.querySelector("#table2");
const respiratory = document.querySelector("#table3");
const infectious = document.querySelector("#table4");
if (x.rowIndex== 0){
cardiac.style.display= "table"
respiratory.style.display= "none"
infectious.style.display = "none"
}
else if (x.rowIndex== 1){
cardiac.style.display= "none"
respiratory.style.display= "table"
infectious.style.display = "none"
}
else if (x.rowIndex== 2){
cardiac.style.display= "none"
respiratory.style.display= "none"
infectious.style.display = "table"
}
}
div.user_input {
display: table-cell;
width: 150px;
font-family: sans-serif;
font-size: 12;
line-height: 10px;
}
div.user_input > input {
width: 140px;
margin: 0px;
padding: 0px;
font-family: sans-serif;
font-size: 14;
line-height: 19px;
}
.user_input:focus {
outline: 0 !important;
}
.table {
margin: 25px 0;
font-size: 13;
font-family: sans-serif;
min-width: 200px;
margin-left: auto;
margin-right: auto;
width: 25%;
border-style: solid;
border-width: 1px;
}
.table td{
margin: 25px 0;
font-size: 13;
font-family: sans-serif;
min-width: 200px;
margin-left: auto;
margin-right: auto;
width: 25%;
border-style: solid;
border-width: 1px;
}
#table2 {
display: none;
}
#table3 {
display: none;
}
#table4 {
display: none;
}
uj5u.com熱心網友回復：
這就是你所需要的。要添加更多按鈕和表格，您只需添加一個新的table并提供一個新類table$（其中$是數字，例如：）table4并添加一個具有data-table-show=$屬性的新按鈕。就這些??。
// Creating conditions
const numInput = document.getElementById('num'),
conditionForm = document.getElementById('condition-form'),
tablesContainer = document.getElementById('tables'),
conditionText = tablesContainer.innerHTML;
conditionForm.onsubmit = async function(e) {
e.preventDefault();
const numValue = Number(numInput.value);
await (tablesContainer.innerHTML = conditionText.repeat(numValue));
addEventListenersToButtons();
}
// Working with table filtering
function addEventListenersToButtons() {
let buttons = document.querySelectorAll('#tables tr.btn');
buttons.forEach(function(button, i) {
button.onclick = function() {
const tables = button.parentNode.parentNode.parentNode.querySelectorAll('.data-table');
tables.forEach(table => {
if (table.classList.contains(`table${button.dataset.tableShow}`)) {
table.classList.remove('hide')
} else {
table.classList.add('hide')
}
});
}
})
}
addEventListenersToButtons();.tables-group table {
margin: 25px 0;
font-size: 13;
font-family: sans-serif;
min-width: 200px;
margin-left: auto;
margin-right: auto;
width: 25%;
border-style: solid;
border-width: 1px;
}
.tables-group table td {
margin: 25px 0;
font-size: 13;
font-family: sans-serif;
min-width: 200px;
margin-left: auto;
margin-right: auto;
width: 25%;
border-style: solid;
border-width: 1px;
}
.data-table.hide {
display: none;
}<div class="container">
<form id="condition-form">
<label for="num">Number of conditions</label>
<input type="number" name="conditions" id="num" min="0">
<button type="submit" name="conditions">Submit</button>
</form>
<hr>
<div id="tables">
<div class="condition">
<div class="tables-group">
<table>
<tr class="btn cardiac" data-table-show="1">
<td>cardiac</td>
</tr>
<tr class="btn respiratory" data-table-show="2">
<td>respiratory</td>
</tr>
<tr class="btn infection" data-table-show="3">
<td>infection</td>
</tr>
</table>
<table class="data-table table1 hide">
<tr>
<td>MI</td>
</tr>
<tr>
<td>valve disease</td>
</tr>
<tr 'myFunction_cardiac(this)'>
<td>CCF</td>
</tr>
</table>
<table class="data-table table2 hide">
<tr>
<td>COPD</td>
</tr>
<tr>
<td>asthma</td>
</tr>
<tr>
<td>bronchiectasis</td>
</tr>
</table>
<table class="data-table table3 hide">
<tr>
<td>TB</td>
</tr>
<tr>
<td>pneumonia</td>
</tr>
<tr>
<td>cellulitis</td>
</tr>
</table>
</div>
</div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/403791.html
標籤：
下一篇：正則運算式匹配/中斷