title: refresh div on adding rows using javascript
body: <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>