从表中删除TR

时间:2014-05-30 22:19:17

标签: javascript php

我通过PHP echo绘制一个表,包含来自SQL查询的一些数据。这是一个购物车脚本。因此,当客户点击从购物车中删除某些商品时,我想从表中删除该TR。为此,我将调用javascript函数'removefromcart'传递项ID和行索引。因此,此函数将从SQL中删除购物车中的项目,并使用行索引从表中删除TR。我正在尝试这样做:

        <?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>

但是,对于cancel.png图像,href中的链接是:

javascript:removefromcart(3, 1)

其中3是产品的ID(OK),但第二个参数,对于表中的每个TR,总是1 ...为什么它没有得到TR的当前行索引?

生成的HTML输出是:

<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>

2 个答案:

答案 0 :(得分:1)

我会做类似的事情:

while($row = mysql_fetch_array($Query))
{
   cont++;
   echo '<tr id="myrow' . cont . '">

然后:

javascript:removefromcart('. $row['id'] .', ' . $cont ')...
顺便说一句,我认为你应该使用PDO

答案 1 :(得分:0)

如果你看一下渲染的html,可能会更清楚发生了什么 您不需要使用javascript设置x,您可以通过添加在外部while循环中递增的变量在PHP代码中设置它。