javascript - 根据用户输入显示 n 次表格，然后具有根据单击的行显示/隐藏表格的功能

Question

我想让一个表(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;
}

Answer 1

这就是您所需要的。要添加更多按钮和表格，您只需添加一个新的 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>