Get selected text from Textbox adjacent to a selected checkbox - javascript

I have a table containing a checkbox , some text and a select box. The user will select a checkbox and then select a value in select box. I'm trying to find out if the user has selected a value in the select box corresponding to the checked checkboxes.
Following is my code:
$(document).ready(function() {
console.log("ready!");
$("#submit").click(function() {
$(".cb:checked").each(function() {
var cb = $(this);
console.log(cb.find('select option:selected').text());
if (cb.find('select option:selected').text() == "-") {
cb.find('select').css("border-color", "red");
}
})
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input class="cb" type="checkbox">
</td>
<td>some text</td>
<td>
<select>
<option>-</option>
<option>abc</option>
<option>def</option>
<option>ghi</option>
</select>
</td>
</tr>
<tr>
<td>
<input class="cb" type="checkbox">
</td>
<td>some text</td>
<td>
<select>
<option>-</option>
<option>abc</option>
<option>def</option>
<option>ghi</option>
</select>
</td>
</tr>
<tr>
<td>
<input class="cb" type="checkbox">
</td>
<td>some text</td>
<td>
<select>
<option>-</option>
<option>abc</option>
<option>def</option>
<option>ghi</option>
</select>
</td>
</tr>
<tr>
<td>
<input class="cb" type="checkbox">
</td>
<td>some text</td>
<td>
<select>
<option>-</option>
<option>abc</option>
<option>def</option>
<option>ghi</option>
</select>
</td>
</tr>
<tr>
<td>
<input class="cb" type="checkbox">
</td>
<td>some text</td>
<td>
<select>
<option>-</option>
<option>abc</option>
<option>def</option>
<option>ghi</option>
</select>
</td>
</tr>
</table>
<button id="submit">
Save
</button>
The selected text value always seems to be empty. What am I doing wrong ?


I have used closest() to get to the tr parent tag and then applied find to get to corresponding checkbox.
$(document).ready(function() {
console.log("ready!");
$("#submit").click(function(e) {
$(".cb:checked").each(function() {
var cb = $(this);
console.log(cb.closest('tr').find('select option:selected').text());
if (cb.closest('tr').find('select option:selected').text() == "-") {
cb.closest('tr').find('select').css("border-color", "red");
}
})
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input class="cb" type="checkbox">
</td>
<td>some text</td>
<td>
<select>
<option>-</option>
<option>abc</option>
<option>def</option>
<option>ghi</option>
</select>
</td>
</tr>
<tr>
<td>
<input class="cb" type="checkbox">
</td>
<td>some text</td>
<td>
<select>
<option>-</option>
<option>abc</option>
<option>def</option>
<option>ghi</option>
</select>
</td>
</tr>
<tr>
<td>
<input class="cb" type="checkbox">
</td>
<td>some text</td>
<td>
<select>
<option>-</option>
<option>abc</option>
<option>def</option>
<option>ghi</option>
</select>
</td>
</tr>
<tr>
<td>
<input class="cb" type="checkbox">
</td>
<td>some text</td>
<td>
<select>
<option>-</option>
<option>abc</option>
<option>def</option>
<option>ghi</option>
</select>
</td>
</tr>
<tr>
<td>
<input class="cb" type="checkbox">
</td>
<td>some text</td>
<td>
<select>
<option>-</option>
<option>abc</option>
<option>def</option>
<option>ghi</option>
</select>
</td>
</tr>
</table>
<button id="submit">
Save
</button>


You're using .find() with each checkbox, which searches descendant elements, but your select boxes aren't descendants of the checkboxes.
You could combine .closest() with .find() in order to target the selected option which corresponds to the current checkbox:
$(this).closest('tr').find('option').filter(':selected');


Simply change your script code to
$(document).ready(function() {
console.log("ready!");
$("#submit").click(function() {
$(".cb:checked").each(function() {
var cb = $(this).parent().parent();
console.log(cb.find('select option:selected').text());
if (cb.find('select option:selected').text() == "-") {
cb.find('select').css("border-color", "red");
}
else
cb.find('select').css("border-color", "");
})
});
});

Related

Selecting multi option select by clicking on div

I'm trying to select multiple options on the select box by clicking on different divs or table row.
I have a multiple select named #events.
I'm using the code below which is fully functional with a simple selectbox but not with a multiple one.
$("td.eventID").on("click", function(e) {
var $select = $("select#events");
$select.val($(this).data("value"));
// simulate click:
$select.find(":selected").click();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td class="eventID" data-value="1" style="cursor:pointer;">
FirstEventName
</td>
</tr>
<tr>
<td class="eventID" data-value="11" style="cursor:pointer;">
EV_Hildegard Spinka
</td>
</tr>
<tr>
<td class="eventID" data-value="14" style="cursor:pointer;">
EV_Melody Parker
</td>
</tr>
<tr>
<td class="eventID" data-value="4" style="cursor:pointer;">
EV_Theodore Auer
</td>
</tr>
<tr>
<td class="eventID" data-value="17" style="cursor:pointer;">
EV_Aditya Stracke
</td>
</tr>
</tbody>
</table>
<select name="events[]" id="events" class="form-control" multiple="" required="">
<option value="1">FirstEventName</option>
<option value="14">EV_Melody Parker</option>
<option value="4">EV_Theodore Auer</option>
<option value="17">EV_Aditya Stracke</option>
<option value="11">EV_Hildegard Spinka</option>
</select>

You could separate the multiple values by comma , like data-value="books,html" then split when you're selecting them.
NOTE: To update the view after selecting the options programmatically you could use .change()
$(".eventID").on("click", function(e) {
$("#events").val($(this).data("value").split(',')).change();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="events" multiple>
<option value="books">Books</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="php">PHP</option>
<option value="js">JavaScript</option>
</select>
<button class="eventID" data-value="css">css</button>
<button class="eventID" data-value="php">php</button>
<button class="eventID" data-value="books,html">Books + html</button>

I SOLVED thanks to Zakaria Acharki's answer. However, I don't know if it's the best solution but it's working as I want.
I added a hidden input which will recieve all values I want to select.
After that I changed a little bit the JS code and add a new one.
// This code add values to the hidden input with "," and then, selecting every value on multiple select
$("td.eventID").on("click", function(e) {
var group = $('#groupingEvents');
var groupValues = group.val();
if(groupValues == "") {
group.val($(this).data("value") + ',');
} else
group.val(groupValues + $(this).data("value"));
$("#events").val(group.val().split(',')).change();
});
// This code is used if you click the selectbox to choose a new option, you need to send values to hidden input, otherwise, a bug appears.
$("#events").on("click", function() {
var group = $('#groupingEvents');
var selectValues = $(this).val();
if(group.val() == "") {
group.val(selectValues.join(","));
} else
group.val(selectValues.join(",") + ',')
});
$("td.eventID").on("click", function(e) {
var group = $('#groupingEvents');
var groupValues = group.val();
if(groupValues == "") {
group.val($(this).data("value") + ',');
} else
group.val(groupValues + $(this).data("value"));
$("#events").val(group.val().split(',')).change();
});
$("#events").on("click", function() {
var group = $('#groupingEvents');
var selectValues = $(this).val();
if(group.val() == "") {
group.val(selectValues.join(","));
} else
group.val(selectValues.join(",") + ',')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td class="eventID" data-value="1" style="cursor:pointer;">
FirstEventName
</td>
</tr>
<tr>
<td class="eventID" data-value="11" style="cursor:pointer;">
EV_Hildegard Spinka
</td>
</tr>
<tr>
<td class="eventID" data-value="14" style="cursor:pointer;">
EV_Melody Parker
</td>
</tr>
<tr>
<td class="eventID" data-value="4" style="cursor:pointer;">
EV_Theodore Auer
</td>
</tr>
<tr>
<td class="eventID" data-value="17" style="cursor:pointer;">
EV_Aditya Stracke
</td>
</tr>
</tbody>
</table>
<input type="hidden" id="groupingEvents" value="">
<select name="events[]" id="events" class="form-control" multiple="" required="">
<option value="1">FirstEventName</option>
<option value="14">EV_Melody Parker</option>
<option value="4">EV_Theodore Auer</option>
<option value="17">EV_Aditya Stracke</option>
<option value="11">EV_Hildegard Spinka</option>
</select>

Apply attributes on page load

I have this working code which updates attributes based on the selection from a drop down box. I have it so the input fields and drop down save but currently the attributes do not. So when I refresh the page all of the data is still their but the input fields are no longer set to disabled. What would be the best way to go about that?
$(document).ready(function() {
$('.my_option').on('change', change_attribute);
});
function change_attribute() {
var version_val = $(this).val();
var parent_row = $(this).closest('tr');
if (version_val == 10) {
parent_row.find('.1').find('input').attr("disabled", "disabled");
parent_row.find('.2').find('input').removeAttr("disabled");
} else if (version_val == 20) {
parent_row.find('.2').find('input').attr("disabled", "disabled");
parent_row.find('.1').find('input').removeAttr("disabled");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
<select class="my_option">
<option>10</option>
<option>20</option>
</select>
</td>
<td class="1"><input type="text"></td>
<td class="2"><input type="text"></td>
</tr>
<tr>
<td>
<select class="my_option">
<option>10</option>
<option>20</option>
</select>
</td>
<td class="1"><input type="text"></td>
<td class="2"><input type="text"></td>
</tr>
<tr>
<td>
<select class="my_option">
<option>10</option>
<option>20</option>
</select>
</td>
<td class="1"><input type="text"></td>
<td class="2"><input type="text"></td>
</tr>
</tbody>
</table>

Un/Check checkbox in table found by name (table value)

I want to Check or Uncheck an Checkbox which is part of an tr.
From this tr I already have the Name as Information.
I need something like "Uncheck checkbox on tr where tr.name = $name"
<tr>
<td id="klauselname">
002
</td>
<td>
50591
</td>
<td>
Text
</td>
<td id="td-center">
<input class="check-box" disabled="disabled" type="checkbox" />
</td>
</tr>
<tr>
<td id="klauselname">
003
</td>
<td>
50601
</td>
<td>
Text
</td>
<td id="td-center">
<input class="check-box" disabled="disabled" type="checkbox" />
</td>
</tr>
Do u have any idea? o.o

First of all , as others pointed out , IDs in your DOM should always be unique. You can use classes or other attributes for mass manipulation , but not IDs.
So lets clear the duplicate ids like this and at the same time add some IDs on your Checkboxes.
<tr>
<td id="myUniqueID_1">002</td>
<td>50591</td>
<td>Text</td>
<td class="td-center" id="myUniqueID_3">
<input id='myCheckBox_1' class="check-box" disabled="disabled" type="checkbox" />
</td>
</tr>
<tr>
<td id="myUniqueID_2">003</td>
<td>50601</td>
<td>Text</td>
<td class="td-center" id="myUniqueID_4">
<input id='myCheckBox_2' class="check-box" disabled="disabled" type="checkbox" />
</td>
</tr>
now we can add a function that will take care the Checkbox changes. We will use the checked property and will change it to false or true depending on our needs.
<script>
function changeState(elID){
var myCheckBoxStatus = document.getElementById(elID).checked;
if(myCheckBoxStatus)
document.getElementById(elID).checked = false;
else
document.getElementById(elID).checked = true;
}
</script>
and lets also place a button to test it out
<button onclick='changeState("myCheckBox_2");'>Toggle</button>

How to make entire row along with the checkbox in it, click and unclick when I anywhere click inside the table row?

I have a table
<tr>
<td><input name="service_id[]" value="17" type="checkbox"></td>
<td class="right">$175.00</td>
<td>add 0 days to delivery</td>
</tr>
And jQuery
$('#tableSelect tr').click(function() {
if ($(this).find('td input:checkbox').prop('checked') == true)
$(this).find('td input:checkbox').prop('checked', false);
else
$(this).find('td input:checkbox').prop('checked', true);
});
My goal is to have the checkbox click ON and OFF as I click on anywhere in the table row.
However what I get is I can click anywhere on the table row to click and unclick, but when I click inside the checkbox itself, it does not register my click.
How can I make entire row and the checkbox in the row click and unclick when I click anywhere inside the entire table row, including entire the checkbox itself?

Add a click event to the inputs and then use stopPropagation to prevent event bubbling.
$('#tableSelect tr').click(function() {
ele = $(this).find('td input:checkbox')[0];
ele.checked = ! ele.checked;
});
$('input:checkbox').click(function(e){
e.stopPropagation();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="tableSelect">
<tr>
<td>
<input name="service_id[]" value="17" type="checkbox">
</td>
<td class="right">$175.00</td>
<td>add 0 days to delivery</td>
</tr>
</table>

You need to register change event also, so bind it like this:
$('#tableSelect tr').on('click change',function() {
if ($(this).find('td input:checkbox').prop('checked') === true)
$(this).find('td input:checkbox').prop('checked', false);
else
$(this).find('td input:checkbox').prop('checked', true);
});
Check the below snippet
$('#tableSelect tr').on('click change', function() {
if ($(this).find('td input:checkbox').prop('checked') === true)
$(this).find('td input:checkbox').prop('checked', false);
else
$(this).find('td input:checkbox').prop('checked', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableSelect">
<tr>
<td>
<input name="service_id[]" value="17" type="checkbox">
</td>
<td class="right">$175.00</td>
<td>add 0 days to delivery</td>
</tr>
<tr>
<td>
<input name="service_id[]" value="17" type="checkbox">
</td>
<td class="right">$175.00</td>
<td>add 0 days to delivery</td>
</tr>
<tr>
<td>
<input name="service_id[]" value="17" type="checkbox">
</td>
<td class="right">$175.00</td>
<td>add 0 days to delivery</td>
</tr>
<tr>
<td>
<input name="service_id[]" value="17" type="checkbox">
</td>
<td class="right">$175.00</td>
<td>add 0 days to delivery</td>
</tr>
<tr>
<td>
<input name="service_id[]" value="17" type="checkbox">
</td>
<td class="right">$175.00</td>
<td>add 0 days to delivery</td>
</tr>
<tr>
<td>
<input name="service_id[]" value="17" type="checkbox">
</td>
<td class="right">$175.00</td>
<td>add 0 days to delivery</td>
</tr>
<tr>
<td>
<input name="service_id[]" value="17" type="checkbox">
</td>
<td class="right">$175.00</td>
<td>add 0 days to delivery</td>
</tr>
<tr>
<td>
<input name="service_id[]" value="17" type="checkbox">
</td>
<td class="right">$175.00</td>
<td>add 0 days to delivery</td>
</tr>
</table>

$('#tableSelect tr *').click(function(e) {
var $cb = $(this).parent('tr').find('input[type=checkbox]');
var c = $cb.prop('checked');
if (c === undefined)
e.stopPropagation();
else
$cb.prop('checked', !c);
});

How can I swap the form values of table row1 by the form values of table row2 without changing the table rows using javascript?

I am trying to swap the form values in row1 with the form values of row2 without swapping the rows. Can someone show me away to achieve this in pure Javascript, vanilla JS, or jQuery. I made the table rows shorter with just two rows, but the actual table consists of 17 rows. Please look very closely at the ids and form values in the third example.
When the UP or DOWN button is not click, the table looks like this in simple form:
<form id="menuitems">
<table class="toolbaritems">
<tbody class="sortable">
<tr id="row1">
<td><button class="up_arrow">UP</button></td>
<td><input value="1></td>
<td><select><option="1" selected></option></select></td>
<td><select><option="1a" selected></option></select></td>
<td><img id="img1"></td>
</tr>
<tr id="row2">
<td><button class="down_arrow">DOWN</button></td>
<td><input value="2"></td>
<td><select><option="2" selected></option></select></td>
<td><select><option="2a" selected></option></select></td>
<td><img id="img2"></td>
</tr>
<tr><td><input type="submit" value="SAVE"></td></tr>
</tbody>
</table>
</form>
This the code currently - When the UP or DOWN buttons are clicked the table looks like this:
<form id="menuitems">
<table class="toolbaritems">
<tbody class="sortable">
<tr id="row2">
<td><button class="up_arrow">UP</button></td>
<td><input value="2"></td>
<td><select><option="2" selected></option></select></td>
<td><select><option="2a" selected></option></select></td>
<td><img id="img2"></td>
</tr>
<tr id="row1">
<td><button class="down_arrow">DOWN</button></td>
<td><input value="1"></td>
<td><select><option="1" selected></option></select></td>
<td><select><option="1a" selected></option></select></td>
<td><img id="img1"></td>
</tr>
<tr><td><input type="submit" value="SAVE"></td></tr>
</tbody>
</table>
</form>
This is what I am trying to accomplish - The values of the inputs should swap except for the tr. Notices the tr ids remain the same but form values are swapped:
Is there a way to achieve this in pure javascript, vanilla JS, or jquery. It will even be even better if this can be done with .html() instead of .val()
<form id="menuitems">
<table class="toolbaritems">
<tbody class="sortable">
<tr id="row1">
<td><button class="down_arrow">DOWN</button></td>
<td><input value="2"></td>
<td><select><option="2" selected></option></select></td>
<td><select><option="2a" selected></option></select></td>
<td><img id="img2"></td>
</tr>
<tr id="row2">
<td><button class="up_arrow">UP</button></td>
<td><input value="1"></td>
<td><select><option="1" selected></option></select></td>
<td><select><option="1a" selected></option></select></td>
<td><img id="img1"></td>
</tr>
<tr><td><input type="submit" value="SAVE"></td></tr>
</tbody>
</table>
</form>

Sorry it took awhile to get back to this. I am submitting this as another answer so that you can compare the two solutions. They are quite similar, and you may find it useful to compare the changes.
jsFiddle Solution
var tbl = $('table'),new_ndx,topRow,trStuff,botRow,brStuff;
$(document).on('click','button',function() {
var dir = $(this).attr('class');
var row = $(this).closest("tr");
var ndx = row.index();
//row.remove();
if (dir=='up_arrow'){
new_ndx = ndx-1;
topRow = tbl.find('tr').eq(new_ndx);
trStuff = topRow.html();
botRow = tbl.find('tr').eq(ndx);
brStuff = botRow.html();
topRow.html(brStuff);
botRow.html(trStuff);
} else {
new_ndx = ndx++;
topRow = tbl.find('tr').eq(new_ndx);
trStuff = topRow.html();
botRow = tbl.find('tr').eq(ndx);
brStuff = botRow.html();
topRow.html(brStuff);
botRow.html(trStuff);
}
});

$(document).ready(function() {
$(".up_arrow,.down_arrow").click(function() {
var row = $(this).parents("tr");
if ($(this).is(".up_arrow")) {
alert("Inner Html Of Previous Row : " + row.prev().html());
} else {
alert("Inner Html Of Next Row : " + row.next().html());
}
});
});
table tr:first-child .up_arrow,
table tr:last-child .down_arrow {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="1">
</td>
</tr>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="2">
</td>
</tr>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="3">
</td>
</tr>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="4">
</td>
</tr>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="5">
</td>
</tr>
</table>

$(document).ready(function() {
$(".up_arrow,.down_arrow").click(function() {
var objRow = $(this).parents("tr");
var intCurrentInputValue = objRow.find("input").val();
if ($(this).is(".up_arrow")) {
var intPreviousInputValue = objRow.prev("tr").find("input").val();
objRow.find("input").val(intPreviousInputValue);
objRow.prev("tr").find("input").val(intCurrentInputValue);
} else {
var intNextInputValue = objRow.next("tr").find("input").val();
objRow.find("input").val(intNextInputValue);
objRow.next("tr").find("input").val(intCurrentInputValue);
}
});
});
table tr:first-child .up_arrow ,
table tr:last-child .down_arrow
{
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="1">
</td>
</tr>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="2">
</td>
</tr>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="3">
</td>
</tr>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="4">
</td>
</tr>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="5">
</td>
</tr>
</table>

I'm not entirely sure what you're trying to achieve, but your code is a bit all over the place.
Here's a sample of a pretty basic 'up/down' table row thingy.
Try not to mix using jQuery and vanilla JS. If you're using jQuery, you shouldn't need to use document.getElementsByClassName (or anything similar) at all. Use the $('.class') selector.
$('table').on('click', '.up', function(){
var $row = $(this).parents('tr');
var $prevRow = $(this).parents('tr').prev('tr');
$row.insertBefore($prevRow);
});
$('table').on('click', '.down', function(){
var $row = $(this).parents('tr');
var $prevRow = $(this).parents('tr').next('tr');
$row.insertAfter($prevRow);
});

$(document).ready(function() {
$(".up_arrow,.down_arrow").click(function(e) {
var objCurrentRow = $(this).parents("tr");
var objAnotherRow = objCurrentRow.next("tr");
if ($(this).is(".up_arrow")) {
var objAnotherRow = objCurrentRow.prev("tr");
}
var arrAllInputOfCurrentRow = objCurrentRow.find("input,select");
var arrAllInputOfAnotherRow = objAnotherRow.find("input,select");
$.each(arrAllInputOfCurrentRow, function(intIndex, objInput) {
var mixTempValue = $(objInput).val();
var $objAnotherInput = $(arrAllInputOfAnotherRow[intIndex]);
$(objInput).val($objAnotherInput.val());
if ($objAnotherInput.is('select')) {
var objTempDropDown = $(objInput).html();
$(objInput).html($objAnotherInput.html());
$objAnotherInput.html(objTempDropDown);
}
$objAnotherInput.val(mixTempValue);
});
});
});
table tr:first-child .up_arrow,
table tr:last-child .down_arrow {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="menuitems">
<table class="toolbaritems">
<tbody class="sortable">
<tr id="row1">
<td>
<button type="button" class="up_arrow">UP</button>
</td>
<td>
<button type="button" class="down_arrow">DOWN</button>
</td>
<td>
<input type="text" value="1" />
</td>
<td>
<select>
<option value="1" selected>1</option>
</select>
</td>
<td>
<select>
<option value="1a" selected>1a</option>
</select>
</td>
</tr>
<tr id="row2">
<td>
<button type="button" class="up_arrow">UP</button>
</td>
<td>
<button type="button" class="down_arrow">DOWN</button>
</td>
<td>
<input type="text" value="2" />
</td>
<td>
<select>
<option value="2" selected>2</option>
</select>
</td>
<td>
<select>
<option value="2a" selected>2a</option>
</select>
</td>
</tr>
<tr id="row3">
<td>
<button type="button" class="up_arrow">UP</button>
</td>
<td>
<button type="button" class="down_arrow">DOWN</button>
</td>
<td>
<input type="text" value="3" />
</td>
<td>
<select>
<option value="3" selected>3</option>
</select>
</td>
<td>
<select>
<option value="3a" selected>3a</option>
</select>
</td>
</tr>
</tbody>
</table>
</form>

$(document).on("click", ".up_arrow,.down_arrow", function(e) {
var $objCurrentRow = $(this).parents("tr");
var strTempHtml = $objCurrentRow.html();
var $objAnotherRow = $objCurrentRow.next("tr");
if ($(this).is(".up_arrow")) {
var $objAnotherRow = $objCurrentRow.prev("tr");
}
$objCurrentRow.html($objAnotherRow.html());
$objAnotherRow.html(strTempHtml);
});
table tr:first-child .up_arrow,
table tr:last-child .down_arrow {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="menuitems">
<table class="toolbaritems">
<tbody class="sortable">
<tr id="row1">
<td>
<button type="button" class="up_arrow">UP</button>
</td>
<td>
<button type="button" class="down_arrow">DOWN</button>
</td>
<td>
<input type="text" value="1" />
</td>
<td>
<select>
<option value="1" selected>1</option>
</select>
</td>
<td>
<select>
<option value="1a" selected>1a</option>
</select>
</td>
<td>
<img src="http://www.w3schools.com/images/compatible_chrome.gif" id="img1" />
</td>
</tr>
<tr id="row2">
<td>
<button type="button" class="up_arrow">UP</button>
</td>
<td>
<button type="button" class="down_arrow">DOWN</button>
</td>
<td>
<input type="text" value="2" />
</td>
<td>
<select>
<option value="2" selected>2</option>
</select>
</td>
<td>
<select>
<option value="2a" selected>2a</option>
</select>
</td>
<td>
<img src="http://www.w3schools.com/images/compatible_opera.gif" id="img2" />
</td>
</tr>
<tr id="row3">
<td>
<button type="button" class="up_arrow">UP</button>
</td>
<td>
<button type="button" class="down_arrow">DOWN</button>
</td>
<td>
<input type="text" value="3" />
</td>
<td>
<select>
<option value="3" selected>3</option>
</select>
</td>
<td>
<select>
<option value="3a" selected>3a</option>
</select>
</td>
<td>
<img src="http://www.w3schools.com/images/compatible_firefox.gif" id="img3" />
</td>
</tr>
</tbody>
</table>
</form>

Ali beat me to the punch, but here's another way to do it:
jsFiddle Demo
var tbl = $('table'),new_ndx;
$(document).on('click','button',function() {
var dir = $(this).attr('class');
var row = $(this).closest("tr");
var ndx = row.index();
row.remove();
if (dir=='up_arrow'){
new_ndx = ndx-1;
tbl.find('tr').eq(new_ndx).before(row);
}else{
new_ndx = ndx++;
tbl.find('tr').eq(new_ndx).after(row);
}
});
table tr:first-child .up_arrow,
table tr:last-child .down_arrow {visibility: hidden;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="1">
</td>
</tr>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="2">
</td>
</tr>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="3">
</td>
</tr>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="4">
</td>
</tr>
<tr>
<td>
<button class="down_arrow">DOWN</button>
<button class="up_arrow">UP</button>
</td>
<td>
<input value="5">
</td>
</tr>
</table>

Categories