table rows

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 type="button" id="btnAdd"  onclick="Add()">Add New Item</button> 
  <table class="table" id="diagnosis_list")>
    <thead>
      <tr>
        <th>Item Number</th>
        <th>Item Name</th>
        <th>Item Description</th>
        <th>&nbsp;</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="priority">1</td>
        <td><input type="text" name="item_name" /></td>
        <td><input type="text" name="item_description"/></td>
        <td><button type="button" class="btn btn-danger btnDelete" id="btnDelete"   
        onclick="Delete()">Delete</button></td>
      </tr>
      <tr>
        <td class='priority'>2</td> 
        <td><input type='text' name='item_name' /></td> 
        <td><input type='text' name='item_description'/></td> 
        <td><button type='button' class='btn btn-danger btnDelete'id='btnDelete'
       onclick="Delete()">Delete</button></td>
      </tr> 
    </tbody>
  </table>
  <button type="button" class="btn btn-danger btnSubmit" id="btnSubmit" onclick="Submit()">Submit</button>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h2>Shipments4You Notification</h2>
    </div>
    <div class="modal-body">
      <p>The rows of the table can be dragged and dropped into new locations if you would like to change the order </p>
    </div>
  </div>

</div>

CSS

.ui-sortable tr {
  cursor: pointer;
}

.ui-sortable tr:hover {
  background: rgba(244, 251, 17, 0.45);
}
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.close {
    color: red;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

JavaScript

$(document).ready(function() {
  $(".btnAdd").bind("click", Add);	
  $(".btnDelete").bind("click", Delete); 
  $(".btnSubmit").bind("click", Submit); 
 function Submit(){ 
    var rows = $("table tbody tr");
    rows.each(function (i) {
        var inputs = $(this).find('input');
        i++;
        inputs.eq(0).attr('id', 'item_number'+i )
            .attr('name', 'item_number'+i )
            .attr('value', '+  +')
        inputs.eq(1).attr('id', 'item_name'+i )
            .attr('name', 'item_name'+i )
        inputs.eq(2).attr('id', 'item_description'+i )
            .attr('name', 'item_description'+i )
    });
    alert(document.getElementById('diagnosis_list').outerHTML);
    };
  //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').attr(count);
   });
 }

function Add(){ 
$("#diagnosis_list tbody").append( 
"<tr>"+ "<td class='priority'></td>"+ 
"<td><input type='text' name='item_name' /></td>"+ 
"<td><input type='text' name='item_description'/></td>"+ 
"<td><button type='button' class='btn btn-danger btnDelete'id='btnDelete'>Delete</button>"+ "</tr>"); 
$(".btnDelete").bind("click", Delete); 
renumber_table('#diagnosis_list');
}; 

function Delete(){ 
var par = $(this).parent().parent(); //tr 
par.remove(); 
renumber_table('#diagnosis_list');
}; 

$(function(){ //Add, Save, Edit and Delete functions code...