Forum Moderators: open
the user is tasked with reordering a list, and then submitting that reordered list to a database...
assuming everything here will need to happen in an array (or two!)...
a caveat - there is a column of numbers (numbering the list) that need to remain intact...so to reiterate, i only need elements in one column to move up/down, not the entire row!
thanks...
<html>
<head>
<script language="javascript">
<!--
function swapCells(idA,idB)
{
var cellA=document.getElementById('color'+idA);
var cellB=document.getElementById('color'+idB);
if(cellA&&cellB)
{
var temp=cellA.innerHTML;
cellA.innerHTML=cellB.innerHTML;
cellB.innerHTML=temp;
}
}
//-->
</script>
</head>
<body>
<table border="1" cellpadding="2" cellspacing="2">
<tr>
<td>1</td>
<td id="color1">blue</td>
<td> </td>
<td><input type="button" value="Down" onClick="swapCells(1,2);"></td>
</tr>
<tr>
<td>1</td>
<td id="color2">orange</td>
<td><input type="button" value="Up" onClick="swapCells(2,1);"></td>
<td><input type="button" value="Down" onClick="swapCells(2,3);"></td>
</tr>
<tr>
<td>1</td>
<td id="color3">green</td>
<td><input type="button" value="Up" onClick="swapCells(3,2);"></td>
<td><input type="button" value="Down" onClick="swapCells(3,4);"></td>
</tr>
<tr>
<td>1</td>
<td id="color4">violet</td>
<td><input type="button" value="Up" onClick="swapCells(4,3);"></td>
<td><input type="button" value="Down" onClick="swapCells(4,5);"></td>
</tr>
<tr>
<td>1</td>
<td id="color5">red</td>
<td><input type="button" value="Up" onClick="swapCells(5,4);"></td>
<td> </td>
</tr>
</table>
</body>
</html>
By using innerHTML, you can include hidden fields that will move with the text.
thanks again for the quick turnaround
<SCRIPT type="text/javascript">
function moveRowUp(tableid, n)
{
var tablebody = document.getElementById(tableid);
if(tablebody.nodeName!= "TBODY") return false;
tablerows = document.getElementsByTagName("TR");
if(n > 0 && n < tablerows.length) {
var tmp = tablerows[n-1].cloneNode(true);
tablebody.removeChild(tablerows[n-1]);
tablebody.insertBefore(tmp, tablerows[n]);
}
}
</SCRIPT>
<TABLE>
<TBODY id="data">
<TR bgcolor="red"><TD>1</TD><TD>red</TD></TR>
<TR bgcolor="orange"><TD>2</TD><TD>orange</TD></TR>
<TR bgcolor="yellow"><TD>3</TD><TD>yellow</td></TR>
<TR bgcolor="green"><TD>4</TD><TD>green</td></TR>
<TR bgcolor="blue"><TD>5</TD><TD>blue</td></TR>
</TBODY>
</TABLE>
<FORM action="#">
Row # (1 - 4) <INPUT type="text" size="2" name="row">
<INPUT type="button" value="move row up" onClick="moveRowUp('data', row.value);">
</FORM>
this one moves the row along with everything in it
[edited by: dcrombie at 3:17 pm (utc) on June 19, 2004]
1. enter 3
2. click --> rows 3 & 4 swap (as expected)
3. click again --> rows 3 & 4 swap back ( expected something different)
Does the number entered represent the current (0-based) row index, or the number in the first column (+1)?
..if the second argument is null
LONG SHOT: Perhaps it gets confused if it receives null (which it will if n is out-of-bounds for the collection). Maybe feeding it undefined instead.
insertBefore could be switched to appendChild if n == [row collection].length. This would involve a little more work.
Anyway..
I reckoned that the process:
[blue]clone > remove > insert clone[/blue]New code:
<SCRIPT type="text/javascript">
function moveRowUp(tableid, n)
{
var tablebody = document.getElementById(tableid);
if(tablebody.nodeName!= "TBODY")
return false;
tablerows = document.getElementsByTagName("TR");
if(n > 0 && n < tablerows.length)
{
tablebody.insertBefore(tablerows[n], tablerows[n-1]);
}
}
</SCRIPT>
I think this has cured the last row problem too.
Now to try and build something _useful_ out of it ;)
