Skip to content

Instantly share code, notes, and snippets.

@liuzy163

liuzy163/gist:6f24978e67cf18aac61e

Created June 3, 2015 17:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save liuzy163/6f24978e67cf18aac61e to your computer and use it in GitHub Desktop.
Save liuzy163/6f24978e67cf18aac61e to your computer and use it in GitHub Desktop.
Download ZIP
JQuery Moves Table Rows
Raw
gistfile1.txt
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
function secretChanged(element){
var currentRow = $(element).parents().parents("tr:first");
$("#notes").slideUp(500);
$("#notes").insertAfter(currentRow);
$("#notes").slideDown(500);
}
function goUp(element){
$("#notes").hide();
var currentRow = $(element).parents().parents("tr:first");
var prevRow = currentRow.prev();
if(prevRow.index()>0){
currentRow.insertBefore(prevRow);
}
}
function goDown(element){
$("#notes").hide();
var currentRow = $(element).parents().parents("tr:first");
var nextRow = currentRow.next();
currentRow.insertAfter(nextRow);
}
</script>
</head>
<body>
<table border="1">
<tr>
<th> First Name</th>
<th> Last Name</th>
<th> Secret </th>
<th> Actions </th>
</tr>
<tr>
<td> John</td>
<td> Smith</td>
<td> <input name="JohnSmithAge" id="JohnSmithAge" onChange="secretChanged(this)"></td>
<td><button type="button" onClick="goUp(this)">Move Up</button><button type="button" onClick="goDown(this)">Move Down</button></td>
</tr>
<tr>
<td> Mary</td>
<td> Cott</td>
<td> <input name="MaryCottAge" id="MaryCottAge" onChange="secretChanged(this)"></td>
<td><button type="button" onClick="goUp(this)">Move Up</button><button type="button" onClick="goDown(this)">Move Down</button></td>
</tr>
<tr>
<td> Greg</td>
<td> Foo</td>
<td> <input name="GregFooAge" id="GregFooAge" onChange="secretChanged(this)"></td>
<td><button type="button" onClick="goUp(this)">Move Up</button><button type="button" onClick="goDown(this)">Move Down</button></td>
</tr>
<tr id="notes" style="display:none">
<td colspan="2">Enter some notes:</td>
<td colspan="2"><input></td>
</tr>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment