[RESOLVED] JS swapping (moving) table rows up/down

**Static** · Oct 19th, 2009, 01:54 PM

i have this JS code

Code:

function move(rowindx,direction){
var tbl = document.getElementById('items');
var aRowIndex = rowindx + direction;
var curr = tbl.rows[rowindx];
var othr = tbl.rows[aRowIndex];

if (direction==-1) {othr.parentNode.insertBefore(curr,othr);}
if (direction==1) {othr.parentNode.insertBefore(curr,othr.nextSibling);}
}

and here is the buttons

HTML Code:

<input type="button" value="&and;" style="color: blue;" onclick="move(this.parentNode.parentNode.rowIndex,-1)">
<input type="button" value="&or;" style="color: blue;" onclick="move(this.parentNode.parentNode.rowIndex,1)">

it only works on the second click!?? driving me nuts!

**SambaNeko** · Oct 19th, 2009, 02:02 PM

Could you post your complete code, as well as what browser you're using?

I set it up with your code bits here and it worked fine (on the first click, and all subsequent clicks) in all browsers I tried...

**Static** · Oct 19th, 2009, 02:07 PM

hope this fits lol

HTML Code:

$wedding_id = $_GET['wid'];
$result = mysql_query("SELECT first_name, last_name FROM customers WHERE wedding_id=" . $wedding_id);
$row = mysql_fetch_row($result);
$bridesname = $row[0] . ' ' . $row[1];

if (isset($_GET['cid'])) {
	$cid = $_GET['cid'];
	$cidp = '&cid=' . $cid;
	$result = mysql_query("SELECT * FROM consult WHERE id=" . $cid);
	if($result) {
			$row = mysql_fetch_row($result);
				foreach($row as $i => $value) {
	             $column = mysql_field_name($result,$i);
	             $$column = $value;
	         }
			
	}
}
?>
<html><head>
<meta name="googlebot" content="noindex, nofollow"> 
<meta name="robots" content="noindex, nofollow">
<script language="javascript">
	
var itmcnt = 0;

function addRow() {
	
	var ival=1;
	var tbl = document.getElementById('items');
	var lastRow = tbl.rows.length;
	var row = tbl.insertRow(lastRow-1);
	
	itmcnt = tbl.rows.length - 2;
	
	var itm = document.getElementById('item').value;
	
		if (itm.indexOf("Groomsmen") > -1) {ival = <?php echo "'" . $groomsmen . "'" ?> }
		if (itm.indexOf("Bridesmaids") > -1) {ival = <?php echo "'" . $maids . "'" ?> }
		if (itm.indexOf("Table") > -1) {ival = <?php echo "'" . $tables . "'" ?> }
		if (itm.indexOf("Grandmothers") > -1) {ival = <?php echo "'" . $grandmothers . "'" ?> }
		if (itm.indexOf("Grandfathers") > -1) {ival = <?php echo "'" . $grandfathers . "'" ?> }
	
	
	row.className='lite';
	var rl = itmcnt;
	var cell = row.insertCell(0);
	cell.className='l';
	cell.vAlign='top';
	cell.innerHTML = '<input type="text" id="item_' + rl + '" name="item_[]" value="' + itm + '" size="30"/>';
	
	var cell = row.insertCell(1);
	cell.vAlign='top';
	cell.innerHTML = '<textarea id="itemdesc_' + rl + '" name="itemdesc_[]" rows="3" cols="40"/></textarea>';
	
	var cell = row.insertCell(2);
	cell.vAlign='top';
	cell.align='right';
	cell.innerHTML = '<input type="text" id="qty_' + rl + '" name="qty_[]" value="' + ival + '" size="3" onBlur="calctot(' + rl + ');"/>';
	
	var cell = row.insertCell(3);
	cell.vAlign='top';
	cell.align='left';
	cell.innerHTML = '@ $<input type="text" id="price_' + rl + '" name="price_[]" value="" size="7" onBlur="calctot(' + rl + ');"/>';
	
	var cell = row.insertCell(4);
	cell.vAlign='top';
	cell.innerHTML = '<input type="text" id="amt_' + rl + '" name="amt_[]" value="" size="7"/>';
	
	var cell = row.insertCell(5);
	cell.vAlign='top';
	cell.className='r';
	cell.innerHTML = '<input type="button" value="^" style="color: blue;" onclick="move(this,\'up\')"><input type="button" value="X" style="color: red;" onclick="document.getElementById(\'items\').deleteRow(this.parentNode.parentNode.rowIndex);"/>';
	
	var ttotal = 0;
	for (var i=0;i<document.forms[0].elements.length;i++)
	{
		var e=document.forms[0].elements[i];
		if (e.name.substr(0,4) == 'amt_')
		{
			ttotal = ttotal + (+e.value)
		}
	}
	document.getElementById('total').value = ttotal.toFixed(2);
	document.getElementById('itemdesc_' + rl).focus();
}

function move(rowindx,direction){
var tbl = document.getElementById('items');
var aRowIndex = rowindx + direction;
var curr = tbl.rows[rowindx];
var othr = tbl.rows[aRowIndex];

if (direction==-1) {othr.parentNode.insertBefore(curr,othr);}
if (direction==1) {othr.parentNode.insertBefore(curr,othr.nextSibling);}
}


function calctot(fid) {
	var a = document.getElementById('qty_' + fid);
	var b = document.getElementById('price_' + fid);
	var c = document.getElementById('amt_' + fid);
	var tot = parseInt(+a.value) * parseInt(+b.value);
	c.value = tot.toFixed(2);
	var ttotal = 0;
	for (var i=0;i<document.forms[0].elements.length;i++)
	{
		var e=document.forms[0].elements[i];
		if (e.name.substr(0,4) == 'amt_')
		{
			ttotal = ttotal + (+e.value)
		}
	}
	document.getElementById('total').value = ttotal.toFixed(2);

}
function savedata() {
	document.forms[0].action='new_quote.php?wid=' + <?php echo "'" . $wedding_id . $cidp . "'"; ?> + '&mode=save';
	document.forms[0].submit();
	
}

</script>

<style type="text/css">
	html, body {
		height: 95&#37;;    
	}
	body {
	  background: rgb(171,179,118);
	  background-image:url('images/dandelion.png');
	  background-position: bottom center;
	  background-repeat:no-repeat;
	  background-attachment: fixed;
	  font-family: "arial",sans-serif;
	  color: rgb(92,97,63); 
	  }
	img.logo {
		margin-left: auto;
		margin-right: auto;
		display: block;
	}
	td {
		padding-left: 5px;
		padding-right: 5px;
	}
	.lite {
		background-color: rgb(191,199,138);
	}
	.toprow {
		border-top: 1px solid rgb(255,255,204);
	}
	.btmrow {
		border-bottom: 1px solid rgb(100,100,54);
	}
	.l {
		border-left: 1px solid rgb(255,255,204);
	}
	.r {
		border-right: 1px solid rgb(100,100,54);
	}
	input {
		color: rgb(92,97,63);
	}
</style>
</head>
<body>
<center><a href="manage.php"><img src="images/logo_small.png" class="logo"/ border="0"></a></center>
<br/>
<center><table width="1100">
	<tr class="lite">
		<td class="toprow btmrow l r" align="center">Wedding Quote for <?php echo $bridesname; ?></td>
	</tr>
</table></center><br />
<form id="quote" method="post" action="quote_view.php">
<center><table id="items" width="1100" cellspacing="0">		
<tr class="lite">
	<td class="toprow l">Item</td><td class="toprow">Description</td><td class="toprow" align="right">Qty</td><td class="toprow" align="center">Price</td><td class="toprow">Total</td><td class="toprow r" width="40"></td>
</tr>
<?php
	if (isset($_GET['mode'])) {
		if ($_GET['mode']=='save') {
		mysql_query("DELETE FROM quote_details WHERE wedding_id=" . $wedding_id);	
			
		$x = 1;
		foreach($_POST['item_'] as $key => $value){ 									
				mysql_query("INSERT INTO quote_details VALUES(" . $wedding_id . ",'" . $_POST['item_'][$key] . "','" . $_POST['itemdesc_'][$key] . "',
										'" . $_POST['qty_'][$key] . "','" . $_POST['price_'][$key] . "','" . $_POST['amt_'][$key] . "'," . $x . ")");
				$x++;
		}
		
		//foreach ($_POST as $key => $value) {
		//	echo $key . ' = ' . $value . '<br />';
		//}
		$x = 1;
		
		$result = mysql_query("SELECT * FROM quote_details WHERE wedding_id=" . $wedding_id . " ORDER BY item_order");
		if ($result) {
			while($row = mysql_fetch_array($result)){
					
					echo '<tr class="lite">';
					echo '<td valign="top" class="l"><input type="text" id="item_' . $x . '" name="item_[]" value="' . $row['item'] . '" size="30"/></td>';
					echo '<td valign="top"><textarea id="itemdesc_' . $x . '" name="itemdesc_[]" rows="3" cols="40"/>' . $row['item_desc'] . '</textarea></td>';
					echo '<td align="right" valign="top"><input type="text" id="qty_' . $x . '" name="qty_[]" value="' . $row['qty'] . '" size="3" onBlur="calctot(' . $x . ');"/>';
					echo '<td align="left" valign="top">@ $<input type="text" id="price_' . $x . '" name="price_[]" value="' . $row['price'] . '" size="7" onBlur="calctot(' . $x . ');"/>';
					echo '<td valign="top"><input type="text" id="amt_' . $x . '" name="amt_[]" value="' . $row['total'] . '" size="7"/>';
					echo '<td valign="top" class="r">
								<input type="button" value="&and;" style="color: blue;" onclick="move(this.parentNode.parentNode.rowIndex,-1)">
								<input type="button" value="&or;" style="color: blue;" onclick="move(this.parentNode.parentNode.rowIndex,1)">
								<input type="button" value="X" style="color: red;" onclick="document.getElementById(\'items\').deleteRow(this.parentNode.parentNode.rowIndex);"/>';
					echo '<tr>';
					$x++;
				}
		}
		
		
	}
}
?>
<tr class="lite">
	<td class="btmrow l" colspan="3">&nbsp;</td><td class="btmrow" align="right">Total: </td><td class="btmrow"><input type="text" id="total" value="" size="8"></td><td class="btmrow r"></td>
</tr>
</table></center>
</form>
<center><table width="1100">
	<tr class="lite">
		<td class="toprow btmrow l r" align="center">
			<select name="additem" id="item">
				<option value="x">[SELECT ITEM]</option>
				<?php
					$result = mysql_query("SELECT item FROM items ORDER BY item");
							if($result) {
									while($row = mysql_fetch_array($result)){
									 echo '<option value="' . $row['item'] . '">' . $row['item'] . '</option>';	
									}
								}
				?>
			</select>
			<input type="button" onclick="addRow();" value="Add Item"><span style="float: right;"><input type="button" value="Save" onClick="savedata();">&nbsp;<input type="button" value="Finished" onClick="document.quote.submit();"></span></td>
	</tr>
</table></center>

**Static** · Oct 19th, 2009, 02:11 PM

a lot going on...

basically this.

The table is empty (column name row and total row)
user selects an item from the dropdown and clicks add.
JS code inserts the new row into the table and lets the user type the description
and a qty / amount (onblur of those fields - total is calculated)
save loops backthrough and drops the data into a database.. and rewrites the new rows into the table.

if that code works fine with just that, then maybe something else is interfering?

added this

alert(rowindx + ' - ' + aRowIndex);

if i click the top row (which is really the second row)

its 1 - 2
second click is 2 - 3 (then it moves)

**kows** · Oct 19th, 2009, 02:28 PM

would you mind posting just the HTML (as it would regularly render to a server), so that I don't need to dissect all of that to try to figure out what you're doing?

**Static** · Oct 19th, 2009, 02:41 PM

BAHAHAHAHA ok... thank you

that made me find this issue

i grabbed the source code and was trying to clean it up so you can see it.. and well what do you know.. i used <tr> instead of </tr>

Thread: [RESOLVED] JS swapping (moving) table rows up/down

Thread Tools

Display

[RESOLVED] JS swapping (moving) table rows up/down

Re: JS swapping (moving) table rows up/down

Re: JS swapping (moving) table rows up/down

Re: JS swapping (moving) table rows up/down

Re: JS swapping (moving) table rows up/down

Re: JS swapping (moving) table rows up/down

Posting Permissions