Member Avatar for WarrenN

Hi
I have a JavaScript function for swapping the values of rows in a table. I have a hidden field in each row to carry a record ID. As I switch the rows the function will update the hidden field but doesn't do it correctly if I switch a number of rows. I dynamically set the values to switch when the page loads but how can I change these values when the rows are moved.
The idea is to change the order of a recordset by clicking on an up or down arrow and then save the values on the record id and sort order, the two hidden fields in each row.
Any help would be appreciated
Thank you
Warren

function swapCells(idA,idB,id1,id2)
{
var cellA=document.getElementById('menu'+idA);
var cellB=document.getElementById('menu'+idB);
if(cellA&&cellB)
{
var temp1=cellA.innerHTML;
cellA.innerHTML=cellB.innerHTML;
cellB.innerHTML=temp1;
document.getElementById('menuid'+idA).value = id2;
document.getElementById('menuid'+idB).value = id1;
}
}

<tr>
<td id="menu1">
<input name="menuid1" type="hidden" id="menuid1" value="2" />

2 - 6 - Disability<br></td>
<td width="20" align="center">&nbsp;</td>
<td width="20" align="center"><img src="../../images/page/btn_down.png" value="down" onClick="swapCells(1,2,2,1);"></td>
<td width="60" align="center">1<input name="menuorder1" type="hidden" id="menuorder1" value="1" /></td>
</tr>
</tr>
<tr>
<tr>
<td id="menu2" width="300">
<input name="menuid2" type="hidden" id="menuid2" value="1" />

1 - 1 - Life<br></td>
<td width="20" align="center"><img src="../../images/page/btn_up.png" value="up" onClick="swapCells(2,1,1,2);"></td>
<td width="20" align="center"><img src="../../images/page/btn_down.png" value="down" onClick="swapCells(2,3,1,3);"></td>
<td width="60" align="center">2<input name="menuorder2" type="hidden" id="menuorder2" value="2" /></td>
</tr>
</tr>
<tr>
<tr>
<td id="menu3" width="300">
<input name="menuid3" type="hidden" id="menuid3" value="3" />

3 - 5 - Home and Auto<br></td>
<td width="20" align="center"><img src="../../images/page/btn_up.png" value="up" onClick="swapCells(3,2,3,1);"></td>
<td width="20" align="center"><img src="../../images/page/btn_down.png" value="down" onClick="swapCells(3,4,3,4);"></td>
<td width="60" align="center">3<input name="menuorder3" type="hidden" id="menuorder3" value="3" /></td>
</tr>

Member Avatar for fatihpiristine

...
var cellA=document.getElementById('menu'+idA);
var cellB=document.getElementById('menu'+idB);
...

check 'menu' + idA there seems wrong since u relaying on menuid1, menuid2

Member Avatar for WarrenN

Hi Thanks

I finally figured it out so here is the change in case anyone else needs to do something like this:

function swapCells(idA,idB,id1,id2) 
{ 
  var cellA=document.getElementById('menu'+idA); 
  var cellB=document.getElementById('menu'+idB); 
  if(cellA&&cellB) 
  { 
    var temp1=cellA.innerHTML; 
    cellA.innerHTML=cellB.innerHTML; 
    cellB.innerHTML=temp1;
    var temp2=document.getElementById('menuid'+idA).value; 
    document.getElementById('menuid'+idA).value = document.getElementById('menuid'+idB).value;
    document.getElementById('menuid'+idB).value = temp2;
  } 
} 

Thank you

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.