how to stop table duplicating (html, javascript) -
me , friend making chatbot in python , want send unknown words website(using firebase), when word added in real time, table displays of previous words , new word. know how fix it? not big of problem because condenses when refresh page. my website on
var ref = new firebase("https://chatbot-errors.firebaseio.com/errors"); ref.on("value", settable , function (errorobject) { console.log("the read failed: " + errorobject.code); }); function settable(data){ var = 0; var table = data.val(); var keys = object.keys(table); console.log(table); var newtable1 = '<tr><td>one</td>'; var newtable2 = '<td>two</td>'; var newtable3 = '<td id="data1">three</td>'; var newtable4 = '<td id=>four</td> <td></td></tr>'; (i; < keys.length; i++){ console.log(i); var k = keys[i] var dates = table[k].date; var time = table[k].time; var names = table[k].name; var wordsare = table[k].word; console.log(names, wordsare); var good1 = newtable1.replace('one', dates); var good2 = newtable2.replace('two', time); var good3 = newtable3.replace('three', names); var good4 = newtable4.replace('four', wordsare);; var good5 = good1+good2+good3+good4; document.getelementbyid("tabless").innerhtml += good5; } }/* * base structure */ /* move down content because have fixed navbar 50px tall */ body { padding-top: 50px; } /* * global add-ons */ .sub-header { padding-bottom: 10px; border-bottom: 1px solid #eee; } /* * top navigation * hide default border remove 1px line. */ .navbar-fixed-top { border: 0; } /* * sidebar */ /* hide mobile, show later */ .sidebar { display: none; } @media (min-width: 768px) { .sidebar { position: fixed; top: 51px; bottom: 0; left: 0; z-index: 1000; display: block; padding: 20px; overflow-x: hidden; overflow-y: auto; /* scrollable contents if viewport shorter content. */ background-color: #f5f5f5; border-right: 1px solid #eee; } } /* sidebar navigation */ .nav-sidebar { margin-right: -21px; /* 20px padding + 1px border */ margin-bottom: 20px; margin-left: -20px; } .nav-sidebar > li > { padding-right: 20px; padding-left: 20px; } .nav-sidebar > .active > a, .nav-sidebar > .active > a:hover, .nav-sidebar > .active > a:focus { color: #fff; background-color: #428bca; } /* * main content */ .main { padding: 20px; } @media (min-width: 768px) { .main { padding-right: 40px; padding-left: 40px; } } .main .page-header { margin-top: 0; } /* * placeholder dashboard ideas */ .placeholders { margin-bottom: 30px; text-align: center; } .placeholders h4 { margin-bottom: 0; } .placeholder { margin-bottom: 20px; } .placeholder img { display: inline-block; border-radius: 50%; }<!doctype html> <html lang="en"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-kj3o2dktikvyik3uenzmm7kckrr/re9/qpg6aazgjwfdmvna/gpgff93hxpg5kkn" crossorigin="anonymous"></script> <script>window.jquery || document.write('<script src="http://getbootstrap.com/assets/js/vendor/jquery.min.js"><\/script>')</script> <script src="https://cdn.firebase.com/js/client/2.3.1/firebase.js"></script> <script src="neo_ai.js"></script> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="neotech.png"> <title>stats</title> <!-- bootstrap core css --> <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- custom styles template --> <link href="dashboard.css" rel="stylesheet"> </head> <body> <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> <a class="navbar-brand" href="#">dashboard</a> <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#navbarsexampledefault" aria-controls="navbarsexampledefault" aria-expanded="false" aria-label="toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarsexampledefault"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">settings</a> </li> <li class="nav-item"> <a class="nav-link" href="#">profile</a> </li> <li class="nav-item"> <a class="nav-link" href="#">help</a> </li> </ul> <form class="form-inline mt-2 mt-md-0"> <input class="form-control mr-sm-2" type="text" placeholder="search" aria-label="search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">search</button> </form> </div> </nav> <div class="container-fluid"> <div class="row"> <nav class="col-sm-3 col-md-2 d-none d-sm-block bg-light sidebar"> <ul class="nav nav-pills flex-column"> <li class="nav-item"> <a class="nav-link active" href="#">words <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">chat logs</a> </li> </ul> </nav> <main class="col-sm-9 ml-sm-auto col-md-10 pt-3" role="main"> <h2>unimplemented words</h2> <div class="table-responsive"> <table class="table table-striped"> <thead> <tr> <th>date</th> <th>time</th> <th>name</th> <th>word</th> <th></th> </tr> </thead> <tbody id="tabless"> <!---<tr> <td id="date">----</td> <td id="time">----</td> <td id="data1">----</td> <td id="wor">----</td> <td></td> </tr>---> </tbody> </table> </div> </main> </div> </div> <!-- bootstrap core javascript ================================================== --> <!-- placed @ end of document pages load faster --> <script src="http://getbootstrap.com/assets/js/vendor/popper.min.js"></script> <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script> <!-- ie10 viewport hack surface/desktop windows 8 bug --> <script src="http://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script> <script src="https://cdn.firebase.com/js/client/2.3.1/firebase.js"></script> </body> </html>
Comments
Post a Comment