I'm drawning a table via PHP echo, containing some data from SQL query. It's a cart script. So when the customer click to remove some item from cart, I want to remove that TR from the table. For this I'll call the javascript function 'removefromcart' passing the item ID and the row index. So this function will remove the item in the cart from SQL, and with the row index delete the TR from table. Here is how I'm trying to do:
<?php
$uid = mysql_real_escape_string($_SESSION['userlogged']);
$Query = mysql_query("SELECT id, info FROM cart where username = '$uid'");
while($row = mysql_fetch_array($Query))
{
echo '<tr id="OrderTable"> <td> '.htmlspecialchars($row["info"], ENT_QUOTES, 'UTF-8').' </td>';
$id = $row['id'];
$NewQuery = mysql_query("SELECT name, date, country, flag, code, med, price FROM products WHERE id = '$id'");
while($newrow = mysql_fetch_array($NewQuery))
{
echo '<td> '.htmlspecialchars($newrow["name"], ENT_QUOTES, 'UTF-8').' </td>';
echo '<td> '.htmlspecialchars($newrow["date"], ENT_QUOTES, 'UTF-8').' </td>';
echo '<td> '.htmlspecialchars($newrow["country"], ENT_QUOTES, 'UTF-8').' </td>';
echo '<td> '.htmlspecialchars($newrow["flag"], ENT_QUOTES, 'UTF-8').' </td>';
echo '<td> '.htmlspecialchars($newrow["code"], ENT_QUOTES, 'UTF-8').' </td>';
echo '<td> '.htmlspecialchars($newrow["med"], ENT_QUOTES, 'UTF-8').' </td>';
echo '<td> '.htmlspecialchars($newrow["price"], ENT_QUOTES, 'UTF-8').' </td>';
echo '<td><label><a href="javascript:buyfromcart('.htmlspecialchars($row['id'], ENT_QUOTES, 'UTF-8').')">
<b><img src="/img/buy.png" /></b></a></label>
<label>
<script>
var x = document.getElementById("OrderTable").rowIndex;
document.write(\'<a href="javascript:removefromcart('.htmlspecialchars($row['id'], ENT_QUOTES, 'UTF-8').', \'+ x +\')"><b><img src="/img/cancel.png"/></b></a></label> </td> </tr>\') </script>';
}
}
?>
</table>
</div>
But the link in the href for the cancel.png image is:
javascript:removefromcart(3, 1)
Where 3 is the ID for the product (OK), but the second parameter, for every TR in the table, is always 1... Why it's not getting the current row index for the TR?
The HTML output generated is:
<html>
<head>
<link rel="stylesheet" href="./css/style.css">
<title>Shop.su</title>
<script type="text/javascript">
function load(url) {
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('cart').innerHTML = 'Your orders ('+xmlhttp.responseText+')';
}
}
xmlhttp.open('GET', url, true);
xmlhttp.send();
}
function addtocart(id)
{
document.getElementById('add'+id).innerHTML='<b>Added!</b>';
load('/cart.php?addtocart&dump='+id);
}
function removefromcart(id, x)
{
alert("Row index is: " + x.rowIndex);
}
</script>
</head>
<body id="home">
<div id='cssmenu'>
<ul>
<li id="homeicon" class='active'><a href='?news'><span>News</span></a></li>
<li id="ordersicon"><a href='?orders'><span id="cart">Your Orders (11)</span></a></li>
<li id="ticketicon" class='last'><a href='?tickets'><span>Tickets</span></a></li>
</ul>
</div> <div id="container">
<p class="orderpage"> Your current cart items:: </p>
<div class="ResultsTable" >
<table >
<tr>
<td>
Type
</td>
<td>
Name
</td>
<td>
Date
</td>
<td>
Country
</td>
<td>
Flag
</td>
<td>
Code
</td>
<td>
Med.
</td>
<td>
Price
</td>
<td>
Buy
</td>
</tr>
<tr id="OrderTable"> <td> Mirror </td><td> NewName </td><td> 456789 </td><td> USA </td><td> VISA </td><td> 101 </td><td> 1409 </td><td> 10.00 </td><td><label><a href="javascript:buyfromcart(3)">
<b><img src="/img/buy.png" /></b></a></label>
<label>
<script>
var x = document.getElementById("OrderTable").rowIndex;
document.write('<a href="javascript:removefromcart(3, '+ x +')"><b><img src="/img/cancel.png"/></b></a></label> </td> </tr>') </script><tr id="OrderTable"> <td> Track </td><td> New Base123123 </td><td> 456789 </td><td> Brazil </td><td> TEST </td><td> 101 </td><td> 1409 </td><td> 10.00 </td><td><label><a href="javascript:buyfromcart(4)">
<b><img src="/img/buy.png" /></b></a></label>
</table>
</div> </div>
</body>
</html>
