refresh div on adding rows using javascript
<p>My table is being populated using ajax from a mysql database. I have a text field below it which adds the entered data to the database. All this works fine, but what i want to do is on adding that new row to the table, i want to dynamically show the user that their entry has been added (or simply refresh that div when new field has been added). Currently aim able to achieve that using a simple function: </p>

<pre><code>function addItem(new_item, edit_table) {
     var itemName = new_item;
     var newRow = document.createElement('tr');
     var rowCell = document.createElement('td');
     rowCell.textContent = itemName;
     // rowCell.addClass("grid");
     newRow.appendChild(rowCell);
     edit_table.appendChild(newRow);
  }
</code></pre>

<p>However this does not let me add extra functionalities to that row e.g. i have a delete and edit icon upon hover. So by using this function i am able to show the new row added but its not exactly functioning. So i recon the better option would be to refresh that div when this happens. </p>

<p>I am using the following code to call the addItems method:</p>

<pre><code>$('#b_go').click(function(){
    //some other conditions, then using ajax to post the data
    success: function (data) {
    if(data == 'success') {
        addItem(new_row, selected_table);
   }
</code></pre>

<p>HTML for the table: </p>

<pre><code>&lt;table class="table table-striped table-bordered home" id="subjects"&gt;
    &lt;thead&gt;
        &lt;th&gt;Subject Title&lt;/th&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;?php
        $sql = mysql_query("select Title from Subject");
        while($row = mysql_fetch_array($sql)) {
            echo "&lt;tr&gt;&lt;td&gt;";
            echo $row['Title']?&gt; &lt;!--using html to output buttons for delete and edit for each row--&gt;
         &lt;?;echo "&lt;/td&gt;&lt;/tr&gt;";
        }
            ?&gt;
    &lt;/tbody&gt;
&lt;/table&gt;
</code></pre>

<p>Css for the above table:</p>

<pre><code>.table {
  width: 100%;
  margin-bottom: 18px;
}
.table th, .table td {
  padding: 8px;
  line-height: 18px;
  text-align: left;
  border-top: 1px solid #ddd;
}
.table th {
  font-weight: bold;
  vertical-align: bottom;
}
.table td {
  vertical-align: top;
}
.table thead:first-child tr th, .table thead:first-child tr td {
  border-top: 0;
}

.table-striped tbody tr:nth-child(odd) td, .table-striped tbody tr:nth-child(odd) th {
  background-color: #f9f9f9;
}

.home {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.home th {
    font-size: 15px;
    font-weight: 400;
    color: #039;
    padding: 10px 8px;
    border-bottom: 2px solid #6678b1;
}
.home td {
    line-height:15px;
    border-bottom: 1px solid #E0E0E0;
    border-left: 1px solid #E0E0E0;
    font-size: 12px;
    color: #404040;
    padding: 9px 8px 3px 8px;
}
.home tbody tr:hover td {
    background-color:#E6E6FF;
    cursor: pointer; 
}
</code></pre>

<p>Any help would be appreciated!</p>
