Elementy DOM'u, js.

Question

Cześć.

Mam taką sprawe, w swoim projekcie mam tabele. Zamysł jest taki, na przycisk "+" chce zmienić np imie użytkownika w tabeli. Nie chce dodawać dla każdego innej klasy czy id, bo ta metoda ma być uniwersalna. Przykład wygląda tak: 

                <tr>
                    <td class="userName">Jasmin</td>
                    <td class="aaa">2</td> 
                    <td>2</td>
                    <td><button class="customizeUser">+</button></td>
                </tr>

Jak widać przycisk jest ostatni w <tr>, chce miec dostęp do 1 <td> czyli userName. Z tym, że taka sytuacja się powtórzy około 10 razy, więc muszę do tego dojść jakoś za pomocą 'this' i previousSibling czy coś. Macie jakieś pomysly?

Answer 1

Możesz dodać coś takiego

    <script>
        window.onload = ()=>{
            for(let button of document.body.getElementsByClassName("customizeUser")){
                let tr = button.parentNode.parentNode;
                let userName = tr.getElementsByClassName("userName")[0];
                button.onclick = ()=>{
                    userName.innerHTML = "nowe imie";
                }
            }
        }
    </script>

To Ci automatycznie załaduje zdarzenia do wszystkich odpowiadających elementów

Comments

Dzieki za pomoc, ta funckja strzalkowa na buttonie wiele mi zmieniła. Dzięki ;)

Answer 2

firstElementChild jako pierwsze dziecko obiektu zdarzenia. Click przekazany z <tr> na button za pomocą e.target