How to move table row in jQuery?
You could also do something pretty simple with the adjustable up/down..
given your links have a class of up or down you can wire this up in the click handler of the links. This is also under the assumption that the links are within each row of the grid.
$(document).ready(function(){
$(".up,.down").click(function(){
var row = $(this).parents("tr:first");
if ($(this).is(".up")) {
row.insertBefore(row.prev());
} else {
row.insertAfter(row.next());
}
});
});
HTML:
<table>
<tr>
<td>One</td>
<td>
<a href="#" class="up">Up</a>
<a href="#" class="down">Down</a>
</td>
</tr>
<tr>
<td>Two</td>
<td>
<a href="#" class="up">Up</a>
<a href="#" class="down">Down</a>
</td>
</tr>
<tr>
<td>Three</td>
<td>
<a href="#" class="up">Up</a>
<a href="#" class="down">Down</a>
</td>
</tr>
<tr>
<td>Four</td>
<td>
<a href="#" class="up">Up</a>
<a href="#" class="down">Down</a>
</td>
</tr>
<tr>
<td>Five</td>
<td>
<a href="#" class="up">Up</a>
<a href="#" class="down">Down</a>
</td>
</tr>
</table>
Demo - JsFiddle
Jquery move table rows to top
$("#village_troup_list tbody").prepend(tr.find("input[value='Aanvragen']").closest('tr'));
This works because every tr is viewed as a single tr, and not as a number of trs. So it moves them instead of cloning :)
Jquery to move row up and down
Add top and bottom links, and insert after/before the first/last row:
DEMO
JS:
$(document).ready(function(){
$(".up,.down,.top,.bottom").click(function(){
var row = $(this).parents("tr:first");
if ($(this).is(".up")) {
row.insertBefore(row.prev());
} else if ($(this).is(".down")) {
row.insertAfter(row.next());
} else if ($(this).is(".top")) {
row.insertBefore($("table tr:first"));
}else {
row.insertAfter($("table tr:last"));
}
});
});
HTML:
<table>
<tr>
<td>One</td>
<td>
<a href="#" class="up">Up</a>
<a href="#" class="down">Down</a>
<a href="#" class="top">Top</a>
<a href="#" class="bottom">Bottom</a>
</td>
</tr>
<tr>
<td>Two</td>
<td>
<a href="#" class="up">Up</a>
<a href="#" class="down">Down</a>
<a href="#" class="top">Top</a>
<a href="#" class="bottom">Bottom</a>
</td>
</tr>
<tr>
<td>Three</td>
<td>
<a href="#" class="up">Up</a>
<a href="#" class="down">Down</a>
<a href="#" class="top">Top</a>
<a href="#" class="bottom">Bottom</a>
</td>
</tr>
<tr>
<td>Four</td>
<td>
<a href="#" class="up">Up</a>
<a href="#" class="down">Down</a>
<a href="#" class="top">Top</a>
<a href="#" class="bottom">Bottom</a>
</td>
</tr>
<tr>
<td>Five</td>
<td>
<a href="#" class="up">Up</a>
<a href="#" class="down">Down</a>
<a href="#" class="top">Top</a>
<a href="#" class="bottom">Bottom</a>
</td>
</tr>
</table>
Move table row from one table to another using JQuery
You have to use the on jQuery callback.
$("#table_dest").on('click', 'img.move-row', function (e) {
alert("hi") //THIS IS NOT FIRING
var tr = $(this).closest("tr").remove().clone();
tr.find("img.move-row")
.attr("src", "move_image_path.jpg")
.attr("alt", "Move");
$("#table_source tbody").append(tr);
});
Initially, when the page loads the click events are binded to the existing images. The ones that are added dinamically don't have the event attached to them. By using the on(), you stop having this issue.
jQuery: Moving a row from one table to another and back again
I hope you know the different between click() vs on('click'), you can google this
your mistake is only write wrong syntax.
$(elemen).click(function(){}) is same with $(elemen).on('click', function(){});
the correct one is:
$(parent).on('event', 'yourelement', function(){})
or this means
$('.selectTable').on('click', '.selectProperty', function(){})
here your code now
$(function(){ $("table").on('click', ".selectProperty, .selectedProperty", function() { if($(this).hasClass('selectProperty')) var newTd= 'selectedProperty', newTbl='selectedPropsTable'; else var newTd= 'selectProperty', newTbl='searchTable'; $(this).prop('checked', false).attr('class', newTd); var tr = $(this).closest('tr'); $('table.'+newTbl).find("tbody").append(tr.clone()); tr.remove(); });});<style>table{border:2px solid black;}</style>
<table class="searchTable"> <tbody> <tr> <td><input type="checkbox" class="selectProperty">a1</td></tr> <tr> <td><input type="checkbox" class="selectProperty">a2</td></tr> </tbody></table><table class="selectedPropsTable"> <tbody> <tr> <td><input type="checkbox" class="selectedProperty">b1</td></tr> <tr> <td><input type="checkbox" class="selectedProperty">b2</td></tr> </tbody></table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>How to move appended rows up or down using jQuery
If you use the following it works with even newly added elements.
$("table").on("click",".up,.down", function {});
$(".addmore").on('click',function(){ count=$('table tr').length; var data="<tr><td>"+count+"</td>"; data+="<td><a class='down' href='#'>Down</a> <a class='up' href='#'>Up</a></td>"; $('table').append(data);});
$("table").on("click",".up,.down", function () { var row = $(this).parents("tr:first"); if($(this).is('.up')){ row.insertBefore(row.prev()); } else{ row.insertAfter(row.next()); }});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class='addmore'>+ Add Row</button> <table> <thead> <tr> <th>ID</th> <th>Action</th> </tr> </thead> <tbody> <tr> <td>1</td> <td><a class="down" href="#">Down</a> <a class="up" href="#">UP</a></td> </tr> </tbody></table>moving a row from one table to another using jquery
HTML
<table id="table_source">
<tbody>
<tr>
<td>Row</td>
<td>1</td>
<td><img src='move_image_path' alt='Move' class='move-row' /></td>
</tr>
<tr>
<td>Another Row</td>
<td>2</td>
<td><img src='move_image_path' alt='Move' class='move-row' /></td>
</tr>
</tbody>
</table>
<table id="table_dest">
<tbody>
</tbody>
</table>
JS
$(document).ready(function() {
$("#table_source img.move-row").live("click", function() {
var tr = $(this).closest("tr").remove().clone();
tr.find("img.move-row")
.attr("src", "remove_image_path.jpg")
.attr("alt", "Remove");
$("#table_dest tbody").append(tr);
});
$("#table_dest img.move-row").live("click", function() {
var tr = $(this).closest("tr").remove().clone();
tr.find("img.move-row")
.attr("src", "move_image_path.jpg")
.attr("alt", "Move");
$("#table_source tbody").append(tr);
});
});
How to move up and down rows in a table and show the row content in a new div with javascript
var row = $(".rowToEdit");
This means all your rows (because all of them have this class).
... and later on:
var rowUp = row.closest('tr').prev('tr'); // and
var rowDown = row.closest('tr').next('tr');
If you look at .prev() and .next(), they return next or previous sibling of each element in collection. Which means rowUp will hold all rows except last and rowDown will hold all rows except first.
You probably want to begin by selecting
var row = $(".rowToEdit").eq(0)
Or $(".rowToEdit").first(). After this your script will start working as you expect.
I guess this is what you're looking for?
var ftt = { rTE : $(".rowToEdit").eq(0), eRTE : $("#editableRowToEdit"), aU : $('#arrowUp'), aD : $("#arrowDown"), place : function(row) { ftt.eRTE.empty(); ftt.eRTE.append(row.clone()) }}
ftt.place(ftt.rTE);
ftt.aU.on("click", function() { var prev = ftt.rTE.prev(); ftt.rTE = prev.is('tr') ? prev : ftt.rTE; ftt.place(ftt.rTE);});
ftt.aD.on("click", function() { var next = ftt.rTE.next(); ftt.rTE = next.is('tr') ? next : ftt.rTE; ftt.place(ftt.rTE);});#editableRowToEdit { border: 1px solid red; display: inline-table; margin-right: 100px;}.arrowIcons { height: 50px; width: 50px; border: 1px solid red; display: inline-block;}#arrowIconsDiv { display: inline-block;}#rowEditDiv { max-width: 800px; display: flex; align-items: center;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="rowEditDiv"> <div id="arrowIconsDiv"> <span class="arrowIcons" id="arrowUp"></span> <span class="arrowIcons" id="arrowDown"></span> </div> <div id='editableRowToEdit'></div></div><table id='fileTextTableId'> <tbody> <tr class='rowToEdit'> <td>1</td> <td> <pre>Some content will go on row 1</pre> </td> </tr> <tr class='rowToEdit'> <td>2</td> <td> <pre>Some content will go on row 2</pre> </td> </tr> <tr class='rowToEdit'> <td>3</td> <td> <pre>Some content will go on row 3</pre> </td> </tr> <tr class='rowToEdit'> <td>4</td> <td> <pre>Some content will go on row 4</pre> </td> </tr> <tr class='rowToEdit'> <td>5</td> <td> <pre>Some content will go on row 5</pre> </td> </tr> <tr class='rowToEdit'> <td>6</td> <td> <pre>Some content will go on row 6</pre> </td> </tr> </tbody></table>Related Topics
Print a Div Using JavaScript in Angularjs Single Page Application
".Addeventlistener Is Not a Function" Why Does This Error Occur
How to Bind the HTML <Title> Content in Vuejs
Save JSON String to Client Pc (Using HTML5 API)
How to Submit a Form When the Return Key Is Pressed
Js - Window.History - Delete a State
How to Stop a Requestanimationframe Recursion/Loop
Javascript: Getting Imagedata Without Canvas
HTML "Data-" Attribute as JavaScript Parameter
Change the Content of a Div Based on Selection from Dropdown Menu
In JavaScript, How to "Clear" the Back (History -1)
How to Swipe Top Down Jquery Mobile
How to Move a Div with Arrow Keys
D3Js Take Data from an Array Instead of a File
Where Should I Declare JavaScript Files Used in My Page? in <Head></Head> or Near </Body>