按钮允许我显示特定数据

Question

我需要帮助尝试显示特定数据，这次我需要通过点击性别来整理表格。这是我的HTML

<center>
    <h1>Russestyret 2018</h1>
<br>
 <header>
        <nav>
            <a href="Index.html">Hjem</a>
            <a href="Registreringer.html">Registrering</a>
            <a href="Index.html">Arragementer</a>
        </nav>
 </header>
 <hr>



<img src="bilder/russestyret2.png" width="400px">


<h4>Arrangementer</h4>
<form id="regarrangement">
    <label>Arrangør: <input id="inparrangør" type="text" required></label>
    <label>Adresse: <input id="inpregadress"type="text"required></label>
    <label>Postadresse:<input id="inppostadresse" type="text"required></label>
    <label>Poststed: <input id="inppoststed" type="tex"required></label>
    <label>Pris: <input id=inppris type="text"required></label>
    <button type="submit">Send inn</button>
</form>



<h4>Registrer en russ ved å fylle ut skjema under. Alle felter må fylles ut.</h4>
<form id="registrering">
    <label>Navn: <input id="inpnavn" placeholder="Raahim Khan" type="text" required></label>
    <label>Adresse: <input id="inpadresse" type="text" placeholder="Adresse 12" required></label>
    <label>Mobilnummer: <input id="inpmobilnummer" placeholder="12345678" required></label>
    <label>Kjønn: 
      <select id="inpkjønn" required>
        <option value="" selected disabled hidden>Velg kjønn</option>
        <option>Mann</option>
        <option>Kvinne</option>
        <option>intetkjønn</option>
      </select>
      <label>Arrangement: <select id="inparrang"></select></label>
    </label>
    <button type="submit">Send inn</button>
</form>
 <br>
 <br>

按钮让我可以看到所有注册的russ，或者只看到menn，women或neuter，visAlleruss代表show allruss，visIntetKjønn代表show neuter等等男性和女性。：

<button class="vis" onclick="visAlleruss()">Vis alle</button>
<button class="vis" onclick="visMenn()">Vis Menn</button>
<button class="vis" onclick="visKvinner()">Vis Kvinner</button>
<button class="vis" onclick="visIntetkjønn()">Vis intetkjønn</button>



<table border="2px" width="500px;">
    <tr><th>Navn</th><th>Adresse</th><th>Mobilnummer</th><th>Kjønn</th><th>Arrangør</th><th>Adresse</th><th>Postadresse</th><th>Poststed</th><th>Pris</th><th>Slett:</th></tr>
    <tbody id="txttabell"></tbody>
</table>
 <br>
 <br>
 <br>
 <br>

下面的函数是注册russ / arrange并将它们带入innerHTML

//Register "arrangement":
function registrerearrangement(event){
    event.preventDefault();

    // Henter ut verdiene til input-feltene
    var arrangør = inpArrangør.value;
    var adresse = inpAdresse.value;
    var postadresse = inpPostadresse.value;
    var poststed = inpPoststed.value;
    var pris = inpPris.value;
    var russ = inpRuss.value;


    inpArrangør.value = "";
    inpAdresse.value = "";
    inpPostadresse.value = "";
    inpPoststed.value = "";
    inpPris.value = "";
    inpRuss.value = "";


    arrangement.push({
        "arrangør" : arrangør,
        "adresse" : adresse,
        "postadresse" : postadresse,
        "poststed" : poststed,
        "pris" : pris,
        "russ" : russ
    });    
}

//bring data from firebase into txtTabell.innerHTML
function hentArrangement(snapshot){
    var pk = snapshot.key;
    var nyTime = snapshot.val();
    var russRef = database.ref("russ/" + nyTime.russ);
    russRef.on("value", function(snapshotruss) {
        var pkk = snapshotruss.key;
        var russObj = snapshotruss.val();
        txtTabell.innerHTML += `
        <tr id="${pk}">
        <td><label class="russlabel" onclick="edit('${pk}')">${nyTime.arrangør}</label><input type="text" class="editItem" style="display:none"></td>
        <td>${nyTime.adresse}</td>
        <td>${nyTime.postadresse}</td>
        <td>${nyTime.poststed}</td>
        <td>${nyTime.pris}</td>
        <td>${russObj.navn}</td>
        <td>${russObj.russadresse}</td>
        <td>${russObj.mobilnr}</td>
        <td>${russObj.kjonn}</td>
        <td><label class="delete" onclick="slett('${pk}','${pkk}')"><button>Slett</button></label></td>
        </tr>`;
    });
} 


//bring russ:
function hentRuss(snapshot){
    var russNoekkel = snapshot.key;
    var russInfo = snapshot.val();

    inpRuss.innerHTML += `<option value="${russNoekkel}">${russInfo.navn}</option>`;
};


//register "russ":
function registrerruss(event) {
    event.preventDefault();
    var navn = inpNavn.value;
    var russadresse = inpRussadresse.value;
    var mobilnr = inpMobil.value;
    var kjonn = inpKjønn.value;


    inpNavn.value = "";
    inpRussadresse.value = "";
    inpMobil.value = "";
    inpKjønn.value = "";


    russ.push({
        "navn" : navn,
        "russadresse" : russadresse,
        "mobilnr" : mobilnr,
        "kjonn" : kjonn
    });

}

skjema.onsubmit = registrerearrangement;
skjema2.onsubmit = registrerruss;

下面的函数是按钮的功能，我正在做的原因.on（“child_added”，hentRuss）是因为russ对象是包含性别的对象btw kjonn代表性别。

    function visAlleruss(){
      txtTabell.innerHTML = "";
      russ
      .on("child_added", hentRuss);    
}

    function visMenn(){
      txtTabell.innerHTML = "";
      russ
      .orderByChild("kjonn")
      .equalTo("Mann")
      .on("child_added", hentRuss);    
}


    function visKvinner(){
      txtTabell.innerHTML = "";
      russ
      .orderByChild("kjonn")
      .equalTo("Kvinne")
      .on("child_added", hentRuss);    
}

    function visIntetkjønn(){
      txtTabell.innerHTML = "";
      russ
      .orderByChild("kjonn")
      .equalTo("intetkjønn")
      .on("child_added", hentRuss);    
}