Кнопки, позволяющие отображать определенные данные

Мне нужна помощь, пытаясь отобразить конкретные данные, и на этот раз мне нужно отсортировать таблицу, щелкнув по полам. вот мой 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>

кнопки, позволяющие мне видеть либо всех зарегистрированных русских, либо только мужчин, женщин или среднего возраста, 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 / аранжировку и перенести их во внутренний HTML

//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);    
}