Question

我有一个包含5行（比如说）的HTML表格，正在网页上显示。表格的第一列是 RowID （每行唯一），每行的最后一列是 [X] 按钮（点击后会删除行）。整个表格位于带有<div>

的 id="cartmain" 元素中

<div id="cartmain">
     <table>
          <tr>
            <td>....</td>
            <td>....</td>
            <td> <a href="#" onclick="removeitem('id1')"> [X] </a> </td>
          </tr>
          ..
          ..
     </table>
</div>

这就是我删除行的方法：

第1步：当用户点击[X]按钮时，XMLHTTPRequest函数会将消息发送到具有每行唯一ID的PHP代码。在PHP代码删除行的过程中，DIV元素显示＆＃34;正在加载...＆＃34;

document.getElementById("cartmain").innerHTML = "Loading..."

第2步： PHP代码将从表（和数据库）中删除该行，并将返回剩余的表。

<?php
     //removing row from database/table...

     //send the remaining table back to the XMLHTTPRequest function...
     echo "<table>";
     echo "<tr><td>...</td>
               <td>...</td>
               <td> <a href=\"#\" onclick=\"removeitem('id1')\"> [X] </a> </td>";
     echo "</tr>";
     ...
     ...
     ...
     echo "</table>";
?>

然后，使用以下行在DIV元素中显示从PHP代码接收的剩余表：

document.getElementById("cartmain").innerHTML = removeitem.responseText;

我的问题： 假设我有5行的表。当我单击“删除”按钮时，该行将被成功删除，然后会显示包含剩余4行的表格。问题出现了：当我想从表中删除另一行时：什么都没发生。换句话说，如果我再次点击某行的 [X] ，则没有任何反复发生。不调用XMLHTTPRequest函数。在理想情况下，它应该再次使用该唯一RowID调用XMLHTTPRequest函数，然后应该显示剩余3行的表。

重要说明：当我刷新页面时，我可以删除另一行。但这一次，我只能删除一行。要删除一个，我必须再次刷新页面。

有人能够在这里找出问题吗？请帮忙。

注意：我的桌子实际上是一个购物车，每行包含一个产品。 [X] 按钮实际上表示＆＃34;删除项目＆＃34;从购物车。

以下是JavaScript代码：

function removeitem(itemid)
{
    alert("The item to be removed is: "+itemid);
    if(window.XMLHttpRequest)
    {
        removeitem = new XMLHttpRequest();
    }
    else
    {
        removeitem=new ActiveXObject("Microsoft.XMLHTTP");
    }

    removeitem.onreadystatechange=function()
    {
        if (removeitem.readyState==4 && removeitem.status==200)
        {
            document.getElementById("cartmain").innerHTML=removeitem.responseText;
        }
        else if(removeitem.readyState < 4)
        {
            document.getElementById("cartmain").innerHTML="Loading...";
        }
    }
    var linktoexecute = "cart.php?option=5&itemid="+itemid; //option =5 signifies that I want to remove the item with ITEMID.
    removeitem.open("GET",linktoexecute,true);
    removeitem.send();
}

函数removeitem显示警告＆＃34;要删除的项目是：123＆＃34;这是第一次，但没有显示第二次。当我在Firebug控制台中检查时，第二次出现以下错误：

removeitem不是函数

请帮助!!

我的所有Javascript函数都在一个单独的文件（sc.js）中，我在页面的<script type="text/javascript" src="js/sc.js"></script>标记中使用了HEAD。

我的观点：最后我认为这个问题很简单：如果网页使用XMLHTTPRequest从PHP页面请求某些HTML - 并且该HTML（由PHP发送）包含一些调用Javascript的按钮功能 - 那么在这种情况下会发生什么[？]。既然我能够第一次删除该行，我认为上述情况不起作用是错误的。只是当我第二次点击按钮时，来自PHP和已经加载的Javascript的代码不知道彼此存在。

Answer 1

在removeitem函数中，您正在用removeitem对象覆盖XMLHttpRequest。因此后来的错误removeitem is not a function。

要解决此问题，请使用var（推荐）前缀removeitem，或使用其他变量名称，或两者兼而有之。

推荐代码：

function removeitem(itemid) {
    alert("The item to be removed is: "+itemid);
    var removeitem = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

    removeitem.onreadystatechange = function() {
        if (removeitem.readyState == 4 && removeitem.status == 200) {
            document.getElementById("cartmain").innerHTML = removeitem.responseText;
        } else if(removeitem.readyState < 4) {
            document.getElementById("cartmain").innerHTML="Loading...";
        }
    }
    var linktoexecute = "cart.php?option=5&itemid="+itemid; //option =5 signifies that I want to remove the item with ITEMID.
    removeitem.open("GET", linktoexecute, true);
    removeitem.send();
}

在var之前添加removeitem可以解决问题，因为该变量是本地定义的。省略var时，新值将附加到最近的父声明（在本例中为函数）。

var removeitem = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

前一行是简称：

var removeitem;
if (window.XMLHttpRequest) {
    removeitem = new XMLHttpRequest();
} else {
    removeitem = new ActiveXObject("Microsoft.XMLHTTP");
}

Answer 2

看起来你并没有像@Rob W所说的那样逃避你的双引号。我在使用php写出HTML时通常使用单引号。我认为这是一个很好的做法。

我唯一能想到的是，你的函数可能不在AJAX响应文本之外。只需检查Firebug或查看第一个响应返回后呈现的内容源。

我希望这会有所帮助。

Answer 3

为什么每次点击都会加载所有表格html？删除时以及使用jQuery删除TR元素后，您只能发送true或false。

删除TR：在removeitem函数中，在ajax响应之后，只需调用$(this).parents("tr").remove();

即可

从HTML调用Javascript函数

3 个答案: