[RESOLVED] JS swapping (moving) table rows up/down
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="∧" style="color: blue;" onclick="move(this.parentNode.parentNode.rowIndex,-1)">
<input type="button" value="∨" style="color: blue;" onclick="move(this.parentNode.parentNode.rowIndex,1)">
it only works on the second click!?? driving me nuts!
Re: JS swapping (moving) table rows up/down
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...
Re: JS swapping (moving) table rows up/down
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%;
}
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="∧" style="color: blue;" onclick="move(this.parentNode.parentNode.rowIndex,-1)">
<input type="button" value="∨" 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"> </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();"> <input type="button" value="Finished" onClick="document.quote.submit();"></span></td>
</tr>
</table></center>
Re: JS swapping (moving) table rows up/down
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)
Re: JS swapping (moving) table rows up/down
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?
Re: JS swapping (moving) table rows up/down
:blush: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>:blush:
