title: How to update firebase database data in html table?
body: <p>i already show the firebase database data in a HTML table</p>
  
  <p><img src="https://i.stack.imgur.com/haHyw.jpg" alt=""></p>
  
  <p>and now i want to click the "Approve" button from the HTML table to update the status to approve. (Click the first row and only update the first data)</p>
  
  <p>here is the code for the button that i do, but i cant work what i want.</p>
  
  <pre><code>function ButtonApproveClick(){
      var req = document.getElementById('Users');
      var dbRefReq = firebase.database().ref().child('Users')
      dbRefReq.once("child_added", function(snapshot ) {
          snapshot.ref.update({ statuss: "valid" })
      });
  }
  </code></pre>
  
  <p>this is my database look like: [The Firebase database]</p>
  
  <p><img src="https://i.stack.imgur.com/XFhjQ.jpg" alt=""></p>
  
  <p>who can help me to solve the problem......</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function() {
  
  var config = {
  
  
    apiKey: "AIzaSyDwrBm054kYrvm-6hZg3Ve_I0Rgp4MfOGo",
    authDomain: "petservice-f7559.firebaseapp.com",
    databaseURL: "https://petservice-f7559.firebaseio.com",
    projectId: "petservice-f7559",
    storageBucket: "petservice-f7559.appspot.com",
    messagingSenderId: "390073142865"
  };
  firebase.initializeApp(config);
  
    const req = document.getElementById('Users');
  
    const dbRefReq = firebase.database().ref().child('Users')
  
    dbRefReq.on('child_added', snap =&gt; {
  
  
        var name = snap.child("name").val();
        var phone = snap.child("phone").val();
        var statuss = snap.child("statuss").val();
        var icurl = snap.child("icurl").val();
        var userid = snap.child("userid").val();
  
  
  $("#table_body").append("&lt;tr&gt;&lt;td&gt;"+name+" &lt;/td&gt;&lt;td&gt;"+phone+"&lt;/td&gt;&lt;td&gt;"+ statuss+ "&lt;/td&gt; &lt;td&gt;&lt;image src="+icurl+" alt=Trulli width=200 height=200&gt; &lt;/image&gt;&lt;/td&gt;&lt;td&gt;&lt;button onclick='App()' dataid ="+userid+"&gt;Approve &lt;/button&gt;&lt;/td&gt;&lt;td&gt;&lt;button onclick='Dis()'&gt;Remove&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;");
  
    });
  
    }());
  
  
  
  function App(){
   firebase.database().ref().child('Users').child(dataid).update({ statuss: "valid" })
  }
  
  function Dis(){
  
      alert("Hi2");
  
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background: #fff;
    padding: 0px;
    margin: 0px;
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
  }
  
  input, button {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
  }
  
  .main-div, .loggedin-div {
    width: 20%;
    margin: 0px auto;
    margin-top: 150px;
    padding: 20px;
    display: none;
  }
  
  .main-div input {
    display: block;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #fff;
    padding: 15px;
    outline: none;
    width: 100%;
    margin-bottom: 20px;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
  }
  
  .main-div input:focus {
    border: 1px solid #777;
  }
  
  .main-div button, .loggedin-div button {
    background: #5d8ffc;
    color: #fff;
    border: 1px solid #5d8ffc;
    border-radius: 5px;
    padding: 15px;
    display: block;
    width: 100%;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
  }
  
  .main-div button:hover, .loggedin-div button:hover {
    background: #fff;
    color: #5d8ffc;
    border: 1px solid #5d8ffc;
    cursor: pointer;
  }
  
  &lt;style&gt;
  table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
  }
  
  td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
  }
  
  tr:nth-child(even) {
    background-color: #dddddd;
  }
  &lt;/style&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  
  &lt;head&gt;
    &lt;script&gt;
    $(document).ready(function(){
      $("#myInput").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $("#A").filter(function() {
          $(this).toggle($(this).text().toLowerCase().indexOf(value) &gt; -1)
        });
      });
    });
    &lt;/script&gt;
  
    &lt;title&gt;Firebase Login&lt;/title&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700" rel="stylesheet"&gt;
  
    &lt;link rel="stylesheet" href="style.css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  
  &lt;h1&gt;HI&lt;/h1&gt;
  &lt;input id="myInput" type="text" placeholder="Search.."&gt;
  
  &lt;div class="mainDiv" align="left"&gt;
    &lt;h1&gt;ALL User&lt;/h&gt;
      &lt;table &gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;td&gt;Name&lt;/td&gt;
            &lt;td&gt;Phone&lt;/td&gt;
            &lt;td&gt;Status&lt;/td&gt;
            &lt;td&gt;Url&lt;/td&gt;
              &lt;td&gt;Approve&lt;/td&gt;
                &lt;td&gt;Disapprove&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
  
        &lt;tbody id="table_body"&gt;
  
  
        &lt;/tbody&gt;
  
      &lt;/table&gt;
    &lt;/div&gt;
  
  
  
    &lt;script src="https://www.gstatic.com/firebasejs/5.3.1/firebase.js"&gt;&lt;/script&gt;
  
            &lt;script src="https://code.jquery.com/jquery-3.1.0.js"&gt;&lt;/script&gt;
  
  
    &lt;script src="view.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>