Menu
Somehow I just get stuck getting this to work. I have a table in which I exchange rows with two buttons for up and down. This works, but I have to exclude 1 column from that operation. What is going wrong here? As I have the selectors now, nothing is coming up, neither for the row which is moved nor the row which makes place, both up and down. What is the best way to shape the selectors or is there any other way to make this happen?At this moment a have this code:
<!DOCTYPE html>
<html>
<head>
<title>energiesale test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="scripts/jquery-1.11.1.min.js"></script>
</head>
<body>
<table>
<thead><tr>
<th>header1</th><th>header2</th><th>header3</th><th>header 4</th> </tr></thead>
<tbody><tr class='row'><td>rij 1</td><td>cell 1</td><td class='id'>1</td><td><button value='up' class="up">Up</button> <button value='down' class="down">Down</button></td></tr>
<tr class='row'><td>rij 2</td><td>cell 2</td><td class='id'>2</td><td><button value='up' class="up">Up</button> <button value='down' class="down">Down</button></td></tr>
<tr class='row'><td>rij 3</td><td>cell 3</td><td class='id'>3</td><td><button value='up' class="up">Up</button> <button value='down' class='down'>Down</button></td></tr>
<tr class='row'><td>rij 4</td><td>cell 4</td><td class='id'>4</td><td><button value='up' class="up">Up</button> <button value='down' class='down'>Down</button></td></tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function(){
$('.up').on('click',function() {
var parent = $(this).parents(".row");
var parent_id = $(this).parents(".row:first").find('.id').val();
var prev_id = parent.prev('.row:first').find('.id').val();
parent.insertBefore(parent.prev(".row"));
$(this).parents(".row").find('.id').val(prev_id);
parent.prev('.row:first').find('.id').val(parent_id);
});
$('.down').on('click',function(){
var parent = $(this).parents(".row");
var parent_id = $(this).parents(".row").find('.id').val();
var next_id = parent.next('.row').find('.id').val();
parent.insertAfter(parent.next(".row"));
$(this).parents('.row').find('.id').val(next_id);
parent.prev('.row').find('.id').val(parent_id);
})
;
})
</script>
</body>
</html>
260
asked Mar 20 '26 06:03
Working example: http://jsfiddle.net/H72Ye/2/
I think I see what you are trying to do: the header 4 column may not shift right?
You are using .val() to fetch the value of the <td> with class="id". This will not work. You example doesn't work because parent_id and next_id are empty when you fetch them.
JQuery documentation says (http://api.jquery.com/val/):
The .val() method is primarily used to get the values of form elements such as input, select and textarea.
You want to set the HTML content of a element, http://api.jquery.com/html/:
In an HTML document, .html() can be used to get the contents of any element.
You must use .html() instead:
var parent_id = $(this).parents(".row").find('.id').html();
var next_id = parent.next('.row').find('.id').html();
PS: there is still something wrong with you 'UP'-function. you need that to debug properly.
i've solved this. I've changed the following in $('.up').on('click',function() {}):
parent.prev('.row:first').find('.id').html(parent_id);
to
parent.next('.row:first').find('.id').html(parent_id);
EDIT: I also added some additional IF-clauses to fix some bugs. Updated JSFiddle: http://jsfiddle.net/H72Ye/6/
50
answered Mar 21 '26 22:03
Working Demo
.val() is a function used to get values of input elements. You
should use .text() instead.
Getting prev_id, check whether it has previous element. Same for next_id
$(document).ready(function () {
$('.up').on('click', function () {
var parent = $(this).parents(".row");
var parent_id = $(this).parents(".row:first").find('.id').text();
if (parent.prev().length) {
var prev_id = !parent.prev().length ? parent_id : parent.prev('.row:first').find('.id').text();
parent.insertBefore(parent.prev(".row"));
parent.find('.id').text(prev_id);
parent.next().find('.id').text(parent_id);
}
});
$('.down').on('click', function () {
var parent = $(this).parents(".row");
var parent_id = $(this).parents(".row").find('.id').text();
if (parent.next().length) {
var next_id = !parent.next().length ? parent_id : parent.next('.row').find('.id').text();
parent.insertAfter(parent.next(".row"));
parent.find('.id').text(next_id);
parent.prev().find('.id').text(parent_id);
}
});
})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
