test.S4Y

by Thomas Pitera

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<div id="content">

  <h1>Ship To Us form</h1>
<button id="btnAdd">Add New Item</button> 
  <table class="table" id="diagnosis_list")>
    <thead>
      <tr>
        <th>Item Name</th>
        <th>Item Number</th>
        <th>Item Description</th>
        <th>&nbsp;</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class='priority'>1</td>
        <td>T-shirt</td>
        <td>Gray, Large</td>
        <td><button class='btn btn-warning btnEdit' id='btnEdit'>Edit</button> 
        <button class='btn btn-danger btnDelete'id='btnDelete'>Delete</button></td>
      </tr>
      <tr>
        <td class='priority'>2</td>
        <td>Jeans</td>
        <td>blue, long</td>
        <td><button class='btn btn-warning btnEdit' id='btnEdit'>Edit</button> 
        <button class='btn btn-danger btnDelete'id='btnDelete'>Delete</button></td>
      </tr>
    </tbody>
  </table>
</div>

CSS

.ui-sortable tr {
  cursor: pointer;
}

.ui-sortable tr:hover {
  background: rgba(244, 251, 17, 0.45);
}

JavaScript

$(document).ready(function() {
	var $name = $('#new-name');
  var $fruit = $('#new-fruit');
  var $vegetarian = $('#new-vegetarian');
  //Helper function to keep table row from collapsing when being sorted
  var fixHelperModified = function(e, tr) {
    var $originals = tr.children();
    var $helper = tr.clone();
    $helper.children().each(function(index) {
      $(this).width($originals.eq(index).width())
    });
    return $helper;
  };

  //Make diagnosis table sortable
  $("#diagnosis_list tbody").sortable({
    helper: fixHelperModified,
    stop: function(event, ui) {
      renumber_table('#diagnosis_list')
    }
  }).disableSelection();

//Renumber table rows
function renumber_table(tableID) {
  $(tableID + " tr").each(function() {
    count = $(this).parent().children().index($(this)) + 1;
    $(this).find('.priority').html(count);
   });
 }

function Add(){ 
$("#diagnosis_list tbody").append( 
"<tr>"+ "<td class='priority'></td>"+ 
"<td><input type='text'/></td>"+ 
"<td><input type='text'/></td>"+ 
"<td><button class='btn btn-primary btnSave' id='btnSave' style='margin-right: 5px;'>Save</button>" +
"<button class='btn btn-danger btnDelete'id='btnDelete'>Delete</button>"+ "</tr>"); 
$(".btnSave").bind("click", Save);	
$(".btnDelete").bind("click", Delete); 
renumber_table('#diagnosis_list');
}; 

function Save(){ 
var par = $(this).parent().parent(); //tr 
var tdName = par.children("td:nth-child(1)"); 
var tdPhone = par.children("td:nth-child(2)"); 
var tdEmail = par.children("td:nth-child(3)"); 
var tdButtons = par.children("td:nth-child(4)"); 
tdName.html(tdName.children("input[type=text]").val()); 
tdPhone.html(tdPhone.children("input[type=text]").val()); 
tdEmail.html(tdEmail.children("input[type=text]").val()); 
tdButtons.html("<button class='btn btn-warning btnEdit' id='btnEdit' style='margin-right: 5px;'>Edit</button>" +
"<button class='btn btn-danger btnDelete'id='btnDelete'>Delete</button>"); 
$(".btnEdit").bind("click", Edit);...