1

我已经使用 HTML/JS 大约一周了。

我正在使用 XMLHttpRequest 在我的主页上加载一个表，允许用户用新数据刷新表。从我创建的表中，我将其他数据检索到表单上的第二个 XMLHttpRequest 中。我通过表格行的 onclick 事件传递数据。这是基本代码：

function test(tablerow)
{
//get the rowindex for the row

var myIndex = tablerow.rowIndex;

//get the cell data for the clicked row in the first column

// original var company_id = table1.rows.item(myIndex).cells.item(0).textContent;

var my_id = table1.rows.item(myIndex).cells.item(0).textContent;

alert(my_id);
}

当我第一次加载表时，这工作得很好，但是当我加载一个新表时，它似乎正在保存以前的表数据。

例子：

第一张表：

ID
--
1
2
3
4
5

单击该行时，响应会正确获取 ID。但。当我加载第二个表时：

ID
--
6
7
8
9
10

当单击第 1 行时，我得到 1 作为单元格数据的响应。2，对于第二行等...它正在获取原始表数据的响应。如前所述，这不会发生在 Chrome 或 IE 中。我得到了正确的数据。

我创建了一个小测试用例，展示了我所看到的行为。

有谁知道如何解决这个问题，为什么这只发生在 Firefox 中？

测试用例：

第1页.php

<!DOCTYPE html>
<html>

<script type="text/javascript">

function test(tablerow)
{
//get the rowindex for the row

var myIndex = tablerow.rowIndex;

//get the cell data for the clicked row in the first column

// original var company_id = table1.rows.item(myIndex).cells.item(0).textContent;

var my_id = table1.rows.item(myIndex).cells.item(0).textContent;

alert(my_id);
}

function getPage()
{
HttpRequest = PostXmlHttpObject();

HttpRequest.onreadystatechange=function()
{
    if (HttpRequest.readyState==4 && HttpRequest.status==200)
    {
        document.getElementById("divTable").innerHTML=HttpRequest.responseText;
    }
}

HttpRequest.open("GET","page2.php?table="+1, true);
HttpRequest.send();

}

function getPage2()
{
HttpRequest = PostXmlHttpObject();

HttpRequest.onreadystatechange=function()
{
    if (HttpRequest.readyState==4 && HttpRequest.status==200)
    {
        document.getElementById("divTable").innerHTML=HttpRequest.responseText;
    }
}

HttpRequest.open("GET","page2.php?table="+2, true);
HttpRequest.send();

}

function PostXmlHttpObject()
{
var HttpRequest = false;

if(window.XMLHttpRequest)
    { // Mozilla, Safari,...
    HttpRequest = new XMLHttpRequest();

    if(HttpRequest.overrideMimeType)
    {
        // set type accordingly to anticipated content type
        HttpRequest.overrideMimeType('text/html');
    }
}
else if(window.ActiveXObject)
{ // IE
    try{
        HttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
    catch(e)
    {
        try
        {
            HttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
        }catch(e){}
    }
}
if(!HttpRequest)
{
    alert('Cannot create XMLHTTP instance');
    return false;
}
return HttpRequest;
}

</script>

<body>
<form name="form1" id="form1">

<input type="button" value="Get XML Page 1" onclick="getPage()"/>
<input type="button" value="Get XML Page 2" onclick="getPage2()"/>

<br /><br />

<div id="divTable"><b></b></div>

</form>
</body>
</html>

Page2.php

<!DOCTYPE html>

<html>

<?php 

$table_id = $_GET["table"];

if ($table_id == 1)
{
?>

<form name="form2" id="form2">
<table id="table1">
<tr>
<th>Id</th>
</tr>

<tr onclick="test(this);">
<td>1</td>
</tr>
<tr onclick="test(this);">
<td>2</td>
</tr>
<tr onclick="test(this);">
<td>3</td>
</tr>
<tr onclick="test(this);">
<td>4</td>
</tr>
<tr onclick="test(this);">
<td>5</td>
</tr>

</table>
<?php 
}
else
{
?>
<table id="table1">
<tr>
<th>Id</th>
</tr>

<tr onclick="test(this);">
<td>6</td>
</tr>
<tr onclick="test(this);">
<td>7</td>
</tr>
<tr onclick="test(this);">
<td>8</td>
</tr>
<tr onclick="test(this);">
<td>9</td>
</tr>
<tr onclick="test(this);">
<td>10</td>
</tr>

</table>
<?php 
}
?>

</form>

</html>
4

1 回答 1

0

像这样修改您的测试功能并检查

function test(tablerow)
{
    alert(tablerow.cells.item(0).innerHTML);
    alert(tablerow.cells[0].innerHTML);
}
于 2013-04-04T07:25:11.300 回答