Question

我已经使用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？

测试用例：

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

Answer 1

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

function test(tablerow)
{
    alert(tablerow.cells.item(0).innerHTML);
    alert(tablerow.cells[0].innerHTML);
}

在Firefox中传递HTML表行数据无法正常工作

测试用例：

使page2.php

1 个答案: