add field toggle

by Rich Costello

HTML

<table class="table text-left table-ail">
   
 <tr>
                                <td>
                                  <span class="name">Asthma</span>
                                </td>
                                <td>
                                  <div class="btn-group btn-toggle"> 
                                    <button class="btn btn-sm btn-primary active">OFF</button>
                                         <button class="btn btn-sm btn-default">ON</button>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>
                                  <span class="name">Bipolar Disorder</span>
                                </td>
                                <td>
                                  <div class="btn-group btn-toggle"> 
                                    <button class="btn btn-sm btn-primary active">OFF</button>
                                         <button class="btn btn-sm btn-default">ON</button>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>
                                  <span class="name">Cancer</span>
                                </td>
                                <td>
                                  <div class="btn-group btn-toggle"> 
                                    <button class="btn btn-sm btn-primary active">OFF</button>
                                         <button class="btn btn-sm btn-default">ON</button>
                                  </div>
                                </td>
                              </tr>
                              <tr>
                                <td>
                                  <span class="name">Epilepsy</span>
                                </td>
                               ...

CSS

.table-header{
    background-color:green;
}
.table-cell{
    
    width:100px;
    height:20px;
}

JavaScript

var inp = $("#txt");
// where #txt is the id of the textbox

$(".table-cell-text").keyup(function (event) {
    if (event.keyCode == 13) {
     
          $('.table-ail tr:last').after('<tr><td><span class="name">' + inp.val() + '</span></td>' +
            '<td>' +
            '<div class="btn-group btn-toggle">' +
            '<button class="btn btn-sm btn-primary active">OFF</button>' +
            ' <button class="btn btn-sm btn-default">ON</button>' +
            '</div></td></tr>');
     
    }
                                            
});