Is there anyway for the user to move the rows up and down. Like the user might want move one row above the other. See the buttons below.
Here's how I'm doing it...
Since you can't add a Custom HTML element into a table (or at least it is not letting me do that), I'm using radio buttons in a creative manner as my up and down buttons.
Create a table, with CSS Class of testTable.
Add three fields to the table:
Field 1 - Column Label: Column 1 - Type: Single Field - Width: 50% - CSS Class: column1
Field 2 - Column Label: Column 2 - Type: Single Field - Width: 42% - CSS Class: column2
Field 3 - Column Label: leave blank - Type: Radio Button - Width: 8% - CSS Class: moveUpAndDown - Assign Values to Choices: Checked - Layout: 2 columns - Choices: ▲ and ▼ - Values: Up and Down
Here's the CSS:
/*Hide the actual radio button, so only the radio button label is displayed*/
.moveUpAndDown input[type=radio] {display : none;}
/*Put a border around the radio button label and color its background, so it looks kind of like a button*/
.moveUpAndDown .choice {border-style : outset; border-width : 1px; background-color : lightgray;}
/*Adjust the layout of the radio button label so that it appears centered in the "button"*/
.moveUpAndDown .choice .form-option-label {max-width : 100%; margin-left : 4px;}
Here's the Javascript:
$(document).ready(function () {
//run this code when any of the MoveUpAndDown radio buttons are clicked
$(".testTable").on('click', '.moveUpAndDown input', function() {
var row = $(this).closest('tr');
//if the up "button" on the row was clicked
if (row.find('.moveUpAndDown input:checked').val() == 'Up')
{
row.prev().before(row); //move the row up
}
//if the down "button" on the row was clicked
else if (row.find('.moveUpAndDown input:checked').val() == 'Down')
{
row.next().after(row); //move the row down
} //end of if... else... statement
//cleanup work
if (row.find('.moveUpAndDown input:checked').val() != undefined) {
//clear the radio button value - sometimes the event function will trigger twice.
//Clearing the value prevents the previous if statements from being triggered if
//it runs the function a second time.
row.find('.moveUpAndDown input:checked').prop('checked', false);
//add a row to the table and then delete it (just to trigger update of the row labels)
$('.testTable .cf-table-add-row').trigger('click');
$('.testTable tr:last').find('.cf-table-delete').trigger('click');
} //end of if statement
}); //end of $(".testTable").on('click', '.moveUpAndDown input', function() {
}); //end of $(document).ready(function () {
The end result looks like this:
It works very well to shift the rows up and down (here's that same screenshot after moving Row 3 Up two times):
@████████ This works amazing! Maybe you should teach a class at the conference on Web Customizations.
So nice of you to say 
I would get a kick out of that.
Mostly, I'm just figuring this stuff out as I go. I've actually only been using forms since the beginning of December. But I've been doing coding in some form or other since I was a kid, but Forms is my first real dive into any kind of web coding (HTML + Javascript + CSS). Trying to answer questions like this helps me better understand how it all works together, and I'm a giant nerd, so I think it's really fun. 
This is great code! One minor adjustment for anyone else who uses it - when there is a date picker on the same form, the last line of script also opens the date picker when the rearrange-row buttons are pressed.
$('.testTable tr:last').find('.cf-table-delete').trigger('click');
// previous version
Changing that last line to the below will help:
$('.testTable tr:last').find(".action .cf-table-delete").trigger('click');
//clicks the delete-row button in the table