0

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>

2
Contributors
2
Replies
3
Views
6 Years
Discussion Span
Last Post by WarrenN
0

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

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

0

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

Edited by mike_2000_17: Fixed formatting

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.