How to copy an entire row? - javascript

I need to create a form where I can include an "Add Row" button. Clicking this button should create a new row, which should be same as my last row. My row contains some drop down values too, so I want them to be appear the same in the next row.
(Edit: So i am able to clone a row but the id of each row is also getting cloned which i want to be unique).
var regex = /^(.*)(\d)+$/i;
var cindex = 1;
$(document).on('click','.Buttons', function() {
var $tr = $('#dataTable tbody tr:first');
var $clone = $tr.clone(true);
cindex++;
$clone.find(':input').val('');
$clone.attr('id', 'id'+(cindex) ); //update row id if required
//update ids of elements in row
$clone.find("*").each(function() {
var id = this.id || "";
var match = id.match(regex) || [];
if (match.length == 3) {
this.id = match[1] + (cindex);
}
});
$tr.after($clone);
});
<table border="0" cellspacing="1" cellpadding="1" id="dataTable" class="graphtable">
<tr>
<td class="headingalign" width="16%">Links</td>
<td class="headingalign" width="32%">Desciption</td>
<td class="headingalign" width="16%">Image</td>
<td class="headingalign" width="16%">URL</td>
</tr>
<tr id="row0" name="row">
<td>
<select title="" tabindex="1" id="fldtype" name="fldtype" class="objselect">
<option value="SEL" selected='true'>Select</option>
<option value="GDS">Guides</option>
<option value="LOF">Latest Offers</option>
<option value="TEM">Templates</option>
<option value="VID">Videos</option>
</select>
</td>
<td>
<input id="flddesc" name="flddesc" maxlength="500" class="objinputtext" size="85" value="{//RESPONSE}">
<xsl:attribute name="value"></xsl:attribute>
</input>
</td>
<td>
<input id="fldimg" name="fldimg" maxlength="15" class="objinputtext" size="35" value="{//RESPONSE}">
<xsl:attribute name="value"></xsl:attribute>
</input>
</td>
<td>
<input id="fldurl" name="fldurl" maxlength="15" class="objinputtext" size="35" value="{//RESPONSE}">
<xsl:attribute name="value"></xsl:attribute>
</input>
</td>
</tr>
</table>
</div>
<div class="bottompanel">
<ul>
<li></li>
</ul>
</div>
</span>
<div class="buttonarea">
<ul>
<li><input tabindex="6" id="Button3" onClick="fnAddMore ();" value="Add More" class="Buttons" name="Button3" type="button" /></li>
</ul>
</div>


The code you're using has several issues, such as using the deprecated delegate() instead of on(), and also trying to delegate the event to an element which is not a parent of the target.
To achieve what you require you can use clone() to create a new instance of the first tr in the table which you can then append(). Note that I separated the headings and content of the table with thead and tbody elements to make retrieval and insertion easier. Finally, note that input elements do not have a closing tag, and there are several mismatched </div> and </span> tags which I removed from the HTML.
$(document).on('click', '.Buttons', function() {
var $clone = $('#dataTable tbody tr:first').clone().appendTo('#dataTable tbody');
$clone.find(':input').val('');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="0" cellspacing="1" cellpadding="1" id="dataTable" class="graphtable">
<thead>
<tr>
<td class="headingalign" width="16%">Links</td>
<td class="headingalign" width="32%">Desciption</td>
<td class="headingalign" width="16%">Image</td>
<td class="headingalign" width="16%">URL</td>
</tr>
</thead>
<tbody>
<tr id="row0" name="row">
<td>
<select title="" tabindex="1" id="fldtype" name="fldtype" class="objselect">
<option value="SEL" selected='true'>Select</option>
<option value="GDS">Guides</option>
<option value="LOF">Latest Offers</option>
<option value="TEM">Templates</option>
<option value="VID">Videos</option>
</select>
</td>
<td>
<input id="flddesc" name="flddesc" maxlength="500" class="objinputtext" size="85" value="{//RESPONSE}" />
<xsl:attribute name="value"></xsl:attribute>
</td>
<td>
<input id="fldimg" name="fldimg" maxlength="15" class="objinputtext" size="35" value="{//RESPONSE}" />
<xsl:attribute name="value"></xsl:attribute>
</td>
<td>
<input id="fldurl" name="fldurl" maxlength="15" class="objinputtext" size="35" value="{//RESPONSE}" />
<xsl:attribute name="value"></xsl:attribute>
</td>
</tr>
</tbody>
</table>
<div class="bottompanel">
<ul></ul>
</div>
<div class="buttonarea">
<ul>
<li><input tabindex="6" id="Button3" value="Add More" class="Buttons" name="Button3" type="button" /></li>
</ul>
</div>

Related

How to put an alert in a form

I have a table and i am adding new rows by cloning the existing row. I want to put an alert over my whole table that if any field is left empty an alert should pop-up stating to fill that particular column.I have tried doing this but my alert is only applicable for the first row.Any help will be appreciated.Thanks.
$('#dataTable input:not([type=button]),#dataTable select').each(function () {
var l_search = $( "#fldsearch" ).val();
if( l_search === 'S' || l_search === "" )
{
alert('Please select from the drop down');
return false;
}
var l_desc = $( "#flddesc" ).val();
if( l_desc === "" )
{
alert('Please fill the description');
return false;
}
var l_img = $( "#fldimg" ).val();
if( l_img === "")
{
alert('Please fill the image path');
return false;
}
var l_url = $( "#fldurl" ).val();
if( l_url === "" )
{
alert('Please fill the url');
return false;
}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="0" cellspacing="1" cellpadding="1" id="dataTable" name="dataTable" class="graphtable">
<thead>
<tr>
<td class="headingalign" width="16%">Links</td>
<td class="headingalign" width="32%">Desciption</td>
<td class="headingalign" width="16%">Image</td>
<td class="headingalign" width="16%">URL</td>
<td class="headingalign" width="05%"></td>
</tr>
</thead>
<tbody>
<tr id="id0" class="vals" name="id0">
<td>
<div class="id_100">
<select type="select-one" id='fldsearch' class="objselect" name="fldsearch" onChange="disableField(this)">
<option value="S">Select</option>
<xsl:for-each select="faml/response/qlwidgetresponsedto/searchby/datamapdto">
<xsl:sort order="ascending" select="description" />
<option value="#{description}">
<xsl:value-of select="description" />
</option>
</xsl:for-each>
</select>
</div>
</td>
<td>
<input id="flddesc" name="flddesc" maxlength="500" disabled="true" class="objinputtext1" size="85" value="{//RESPONSE}" />
</td>
<td>
<input id="fldimg" name="fldimg" maxlength="50" disabled="true" class="objinputtext2" size="45" value="{//RESPONSE}" />
</td>
<td>
<input id="fldurl" name="fldurl" maxlength="55" disabled="true" class="objinputtext3" size="40" value="{//RESPONSE}" />
</td>
<td>
<input tabindex="6" value="Delete Row" disabled="true" class="DeleteButton" type="button" />
</td>
</tr>
</tbody>
</table>
<div class="buttonarea">
<ul>
<li><input tabindex="6" id="Button3" value="Add New Row" class="Buttons" name="Button3" type="button" /></li>
<li><input tabindex="6" id="Button5" value="Initiate" class="buttons" name="Button5" type="button" onclick="return fnOnSubmit();" /></li>
</ul>
</div>

Alert for empty field in table using jQuery

I have created a table and added a button 'Add Row' which will clone the row of the table and append it with the previous row. I have put an alert for which if any of the fields is left empty then user should not be able to add a new row.It seems to be working when i hard-coded the drop down values. Now since I am fetching my drop down values from the local db it always shows alert("Please fill all the fields in the current row") after filling all the fields. Any suggestion will be appreciated. Thanks
```````````````````````jQuery``````````````````````````
var regex = /^([a-zA-Z0-9 _-]+)$/;
var cindex = 0;
$(document).on('click','.Buttons', function(e) {
var count = $('table tr:last input:text').filter((_,el) => el.value.trim() == "").length;
if(count || !$('select:last').val()){
alert("Please fill all the fields in the current row");
return false;
}
var $tr = $('#dataTable tbody tr:last');
var $clone = $tr.clone(true);
cindex++;
$clone.find(':input').not('select').not('.DeleteButton').val('').attr('disabled', true);
$clone.attr('id', 'id'+(cindex) ); //update row id if required
//update ids of elements in row
$clone.find("*").each(function() {
var id = this.id || "";
if(id != ""){
var match = id.match(regex) || [];
if (match.length == 2) {
this.id = this.name + (cindex);
}
}
});
$tr.after($clone);
});
HTML
<table border="0" cellspacing="1" cellpadding="1" id="dataTable" class="graphtable">
<thead>
<tr>
<td class="headingalign" width="16%">Links</td>
<td class="headingalign" width="32%">Desciption</td>
<td class="headingalign" width="16%">Image</td>
<td class="headingalign" width="16%">URL</td>
<td class="headingalign" width="05%"></td>
</tr>
</thead>
<tbody>
<tr id="id01" name="row">
<td><select type="select-one" id='fldsearch' class="objselect" name="fldsearch" onChange="disableField()" >
<option value="">Select</option>
<xsl:for-each select="{Values fetching from local db}">
<xsl:sort order="ascending" select="description"/>
<option value="{code}"> <xsl:value-of select="description"/> </option>
</xsl:for-each>
</select></td>
<td><input id="flddesc" name="flddesc" maxlength="500" disabled="true" class="objinputtext" size="85" value="{//RESPONSE}" /></td>
<td><input id="fldimg" name="fldimg" maxlength="50" disabled="true" class="objinputtext" size="35" value="{//RESPONSE}" /></td>
<td><input id="fldurl" name="fldurl" maxlength="15" disabled="true" class="objinputtext" size="35" value="{//RESPONSE}" /></td>
<td><input tabindex="6" value="Delete Row" disabled="true" class="DeleteButton" type="button" /></td>
</tr>
</tbody>
</table>
<div class="buttonarea">
<ul>
<li>
<input tabindex="6" id="Button3" value="Add New Row" class="Buttons" name="Button3" type="button" />
</li>
<li>
<input tabindex="6" id="Button5" value="Initiate" class="buttons" name="Button5" type="button" onClick="return fnOnSubmit();"/>
</li>
</ul>
</div>

How to remove dynamically added row using j Query

I am adding rows to my table by cloning it. When the user clicks on the Delete Row button a checkbox should appear at the starting of every row which when selected remove that particular row.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="0" cellspacing="1" cellpadding="1" id="dataTable" class="graphtable">
<thead>
<tr>
<td class="headingalign" width="16%">Links</td>
<td class="headingalign" width="32%">Desciption</td>
<td class="headingalign" width="16%">Image</td>
<td class="headingalign" width="16%">URL</td>
</tr>
</thead>
<tbody>
<tr id="id01" name="row">
<td>
<select type="select-one" id='fldsearch' class="objselect" name="fldsearch" onChange="disableField()">
<option value="">Select</option>
<option value="GDS">Guides</option>
<option value="LOF">Latest Offers</option>
<option value="TEM">Templates</option>
<option value="VID">Videos</option>
</select>
</td>
<td>
<input id="flddesc" name="flddesc" maxlength="500" disabled="true" class="objinputtext" size="85" value="{//RESPONSE}" />
</td>
<td>
<input id="fldimg" name="fldimg" maxlength="50" disabled="true" class="objinputtext" size="35" value="{//RESPONSE}" />
</td>
<td>
<input id="fldurl" name="fldurl" maxlength="15" disabled="true" class="objinputtext" size="35" value="{//RESPONSE}" />
</td>
</tr>
</tbody>
</table>
<div class="buttonarea">
<ul>
<li><input tabindex="6" id="Button3" value="Add New Row" class="Buttons" name="Button3" type="button" /></li>
</ul>
<ul>
<li><input tabindex="6" id="Button4" value="Delete Row" class="delButtons" name="Button4" type="button" /></li>
</ul>
</div>
$("#dataTable").on('click', '.delButtons', function () {
var $tr = $('#dataTable tbody tr:last');
$tr.remove();
});
Any help will be appreciated. Thanks

You can try below code to add checkbox on click of delete button and remove row on click of newly added checkbox
$(function(){
$('.delButtons').on('click', function(){
$('#dataTable thead tr').each(function(){
if($(this).find('.removeBtnHeader').length==0) {
$(this).find('td:first').before('<td class="removeBtnHeader"></td>');
}
});
$('#dataTable tbody tr').each(function(){
if($(this).find('.removeBtn').length==0) {
$(this).find('td:first').before('<td><input type="checkbox" class="removeBtn"></td>');
}
});
});
$(document).on('click', '.removeBtn', function(){
$(this).closest('tr').remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="0" cellspacing="1" cellpadding="1" id="dataTable" class="graphtable">
<thead>
<tr>
<td class="headingalign" width="16%">Links</td>
<td class="headingalign" width="32%">Desciption</td>
<td class="headingalign" width="16%">Image</td>
<td class="headingalign" width="16%">URL</td>
</tr>
</thead>
<tbody>
<tr id="id01" name="row">
<td>
<select type="select-one" id='fldsearch' class="objselect" name="fldsearch" onChange="disableField()" >
<option value="">Select</option>
<option value="GDS">Guides</option>
<option value="LOF">Latest Offers</option>
<option value="TEM">Templates</option>
<option value="VID">Videos</option>
</select>
</td>
<td>
<input id="flddesc" name="flddesc" maxlength="500" disabled="true" class="objinputtext" size="85" value="{//RESPONSE}" />
</td>
<td>
<input id="fldimg" name="fldimg" maxlength="50" disabled="true" class="objinputtext" size="35" value="{//RESPONSE}" />
</td>
<td>
<input id="fldurl" name="fldurl" maxlength="15" disabled="true" class="objinputtext" size="35" value="{//RESPONSE}" />
</td>
</tr>
<tr id="id02" name="row">
<td>
<select type="select-one" id='fldsearch' class="objselect" name="fldsearch" onChange="disableField()" >
<option value="">Select</option>
<option value="GDS">Guides</option>
<option value="LOF">Latest Offers</option>
<option value="TEM">Templates</option>
<option value="VID">Videos</option>
</select>
</td>
<td>
<input id="flddesc" name="flddesc" maxlength="500" disabled="true" class="objinputtext" size="85" value="{//RESPONSE}" />
</td>
<td>
<input id="fldimg" name="fldimg" maxlength="50" disabled="true" class="objinputtext" size="35" value="{//RESPONSE}" />
</td>
<td>
<input id="fldurl" name="fldurl" maxlength="15" disabled="true" class="objinputtext" size="35" value="{//RESPONSE}" />
</td>
</tr>
</tbody>
</table>
<div class="buttonarea">
<ul>
<li><input tabindex="6" id="Button3" value="Add New Row" class="Buttons" name="Button3" type="button" /></li>
</ul>
<ul>
<li><input tabindex="6" id="Button4" value="Delete Row" class="delButtons" name="Button4" type="button" /></li>
</ul>
</div>

Adding a row into my table which contain a select won't work

I want to add a row to my table to allow to the user to add data which will be inserted then into the data base.
I have imbricated tables (the coed given present just first row to simplify but it’s a long form given as a table).
My first problem is when I add the select to my getElementById it won’t work?
My second problem I don’t know if I can recuperate the fields added by the user and inserted them to my database?
I found the example that I have followed in ( Add table row in jQuery )
<html>
<head>
<script type="text/javascript">
function displayResult() {
document.getElementById("tabsalaire").insertRow(-1).innerHTML = '<td><input name="salaireparstatut4" id="salaireparstatut4" /></td>';
document.getElementById("tabtitulaire").insertRow(-1).innerHTML = '<td><input name="nbtitulaire4" id="nbtitulaire4" /></td>';
document.getElementById("tabfemale").insertRow(-1).innerHTML = '<td><input name="nbfemale4" id="nbfemale4" /></td>';
document.getElementById("tabsommeparstatut").insertRow(-1).innerHTML = '<td><input name="sommeparstatut4" id="sommeparstatut4" /></td>';
document.getElementById("selectstatus").insertRow(-1).innerHTML = '<td><select name="statutselect4" required> < option value = "" > choisir < /option> < option value = "Professeur" > Professeur < /option> < option value = "Assistant" > Assistant < /option> < /select> < input type = "hidden"
name = "EnseignementSuperieur"
value = "EnseignementSuperieur" / > < /td>';
}
</script>
</head>
<body>
<form method="post" action="processform.php">
<table border="1">
<tr>
<th>Add</th>
<th>Salaire annuel</th>
<th>nombre titulaire</th>
<th>Nombre femme</th>
<th>Somme</th>
<th>Statut</th>
<th>Type</th>
</tr>
<td>
<table>
<tr>
<td>
<button type="button" onClick="displayResult()">Insert new row</button>
</td>
</tr>
</table>
</td>
<td>
<table id="tabsalaire">
<tr>
<td>
<input name="salaireparstatut1" id="salaireparstatut1" />
</td>
</tr>
<tr>
<td>
<input name="salaireparstatut2" id="salaireparstatut2" />
</td>
</tr>
<tr>
<td>
<input name="salaireparstatut3" id="salaireparstatut3" />
</td>
</tr>
</table>
</td>
<td>
<table id="tabtitulaire">
<tr>
<td>
<input name="nbtitulaire1" id="nbtitulaire1" />
</td>
</tr>
<tr>
<td>
<input name="nbtitulaire2" id="nbtitulaire2" />
</td>
</tr>
<tr>
<td>
<input name="nbtitulaire3" id="nbtitulaire3" />
</td>
</tr>
</table>
</td>
<td>
<table id="tabfemale">
<tr>
<td>
<input name="nbfemale1" id="nbfemale1" />
</td>
</tr>
<tr>
<td>
<input name="nbfemale2" id="nbfemale2" />
</td>
</tr>
<tr>
<td>
<input name="nbfemale3" id="nbfemale3" />
</td>
</tr>
</table>
</td>
<td>
<table id="tabsommeparstatut">
<tr>
<td>
<input name="sommeparstatut1" id="sommeparstatut1" /> </td>
</tr>
<tr>
<td>
<input name="sommeparstatut2" id="sommeparstatut2" />
</td>
</tr>
<tr>
<td>
<input name="sommeparstatut3" id="sommeparstatut3" />
</td>
</tr>
</table>
</td>
<td>
<table id="selectstatus">
<tr>
<td>
<select name="statutselect1" required>
<option value="">choisir</option>
<option value="Professeur">Professeur</option>
<option value="Assistant">Assistant</option>
</select>
<input type="hidden" name="designationtypecadre1" value="EnseignementSuperieur" /> </td>
</tr>
<tr>
<td>
<select name="statutselect2">
<option value="">choisir</option>
<option value="Professeur">Professeur</option>
<option value="Assistant">Assistant</option>
</select>
<input type="hidden" name="designationtypecadre2" value="EnseignementSuperieur" /> </td>
</tr>
<tr>
<td>
<select name="statutselect3">
<option value="">choisir</option>
<option value="Professeur">Professeur</option>
<option value="ProfesseurConf">ProfesseurConf</option>
<option value="Assistant">Assistant</option>
</select>
<input type="hidden" name="designationtypecadre3" value="EnseignementSuperieur" /> </td>
</tr>
<tr></tr>
</table>
</td>
<th>
EnseignementSuperieur </th>
</tr>
<td> </td>
<td>
<input name="SubSommenbTitulaireTypeCadre" id="SubSommenbTitulaireProfChercheur" />
</td>
<td>
<input name="SubSommenbFemaleTypeCadre" id="SubSommenbFemaleProfChercheur" />
</td>
<td>
<input name="SubSommeNbProfTypeCadre" id="SubSommeNbProfChercheur" />
</td>
<td>
<input name="SubSommeSalaireAnnuelTypeCadre" id="SubSommeSalaireAnnuelProfChercheur" />
</td>
<th>Somme SUB</th>
<tr>
</tr>
<tr>
<td>
<input type="submit" name="Validate" value="Validate" />
</td>
</tr>
</table>
</body>
</html>

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