0

I have an Html table and I'm feeding that table with data from firebase so in my Html there's no table data td i have tried to add on click on the table row tr but this is adding the click on the table header th

<div>
    <table>
         <tr onclick="myFunction(this)">
                <th>Name</th>
                <th>Phone</th>
                <th>ID</th>
                </tr>
            <tbody id="table">
            </tbody>
            </table>
        </div>

        <script>
  function myFunction(x) {
      alert("Row index is: " + x.rowIndex);
  }
</script>

the second try is js I have tried this and many other functions like this one but it did nothing no response no errors

function addRowHandlers() {
  var table = document.getElementById("table");
  var rows = table.getElementsByTagName("tr");
  for (i = 1; i < rows.length; i++) {
      var row = table.rows[i];
      row.onclick = function(myrow){
          return function() { 
            var cell = myrow.getElementsByTagName("td")[0];
            var id = cell.innerHTML;
            alert("id:" + id);
          };
      }(row);
  }
}

and this is how im feeding td from firebase

var ref = firebase.database().ref("users");
ref.on("value", function(data){
 $('#table').empty()
   var content = '';
    data.forEach(function(childSnapshot){
        if (childSnapshot.exists()){
        var childData = childSnapshot.val();
        console.log(childData);
        

        content +='<tr>';
           content += '<td>' + childData.username + '</td>';
           content += '<td>' + childData.phone + '</td>';
           content += '<td>' + childSnapshot.key + '</td>';
           content += '</tr>';
     };
   });
   $('#table').append(content);
});

how to add onClick event to each row I'm new to HTML and js languages

Teemu
  • 21,017
  • 6
  • 49
  • 91
Swift
  • 3
  • 1
  • 5
  • 1
    Use [event delegation](https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation), add a single click event to `tbody`. In the handler function the clicked row is `event.target.closest('tr')`. – Teemu May 24 '21 at 10:42
  • 1
    thanks, @Teemu for this answer I have searched for the Event delegation and found an answer – Swift May 24 '21 at 11:30

1 Answers1

0

You can refactor your function like

var ref = firebase.database().ref("users");
ref.on("value", function (data) {
    $('#table').empty()
    data.forEach(function (childSnapshot) {
        if (childSnapshot.exists()) {
            var childData = childSnapshot.val();
            console.log(childData);
            const tr = document.createElement('tr')
            let content = ""
            content += '<td>' + childData.username + '</td>';
            content += '<td>' + childData.phone + '</td>';
            content += '<td>' + childSnapshot.key + '</td>';

            tr.innerHTML = content;
            tr.onclick = function () {
                alert('tr', childData.phone)
            }
            $('#table tbody').append(tr);
        };
    });

});
shubhamAyodhyavsi
  • 26
  • 1