2

im having a firefox issue where i dont see the wood for the trees using ajax i get html source from a php script

this html code contains a tag and within the tbody some more tr/td's

now i want to append this tbody plaincode to an existing table. but there is one more condition: the table is part of a form and thus contains checkboxe's and drop down's. if i would use table.innerHTML += content; firefox reloads the table and reset's all elements within it which isnt very userfriendly as id like to have

what i have is this

// content equals transport.responseText from ajax request
function appendToTable(content){
    var wrapper = document.createElement('table');
    wrapper.innerHTML = content;
    wrapper.setAttribute('id', 'wrappid');
    wrapper.style.display = 'none';
    document.body.appendChild(wrapper);

    // get the parsed element - well it should be
    wrapper = document.getElementById('wrappid');
    // the destination table
    table = document.getElementById('tableid');

    // firebug prints a table element - seems right
    console.log(wrapper);
    // firebug prints the content ive inserted - seems right
    console.log(wrapper.innerHTML);

    var i = 0;
    // childNodes is iterated 2 times, both are textnode's
    // the second one seems to be a simple '\n'
    for(i=0;i<wrapper.childNodes.length;i++){
        // firebug prints 'undefined' - wth!??
        console.log(wrapper.childNodes[i].innerHTML);
        // firebug prints a textnode element - <TextNode textContent=" ">
        console.log(wrapper.childNodes[i]);
        table.appendChild(wrapper.childNodes[i]);
    }
    // WEIRD: firebug has no problems showing the 'wrappid' table and its contents in the html view - which seems there are the elements i want and not textelements
}

either this is so trivial that i dont see the problem OR its a corner case and i hope someone here has that much of expirience to give an advice on this - anyone can imagine why i get textnodes and not the finally parsed dom elements i expect?

btw: btw i cant give a full example cause i cant write a smaller non working piece of code its one of those bugs that occure in the wild and not in my testset

thx all

4

3 回答 3

2

您可能遇到了遵循 W3C 规范的 Firefox 怪癖。在规范中，标签之间的空白是“文本”节点而不是元素。这些 TextNodes 在 childNodes 中返回。这个其他答案描述了一种解决方法。也使用像 JQuery 这样的东西使这更容易。

于 2010-04-19T16:30:03.850 回答
0

我希望在任何浏览器中都有这种行为，因为 += 操作数会根据定义覆盖表中已有的内容。两种解决方案：

不要从 PHP 文件中接收 HTML 代码，而是让 PHP 生成要添加到表中的项目列表。逗号/制表符分隔，无论如何。然后使用 Table.addRow()、Row.addCell() 和 cell.innerHTML 将项目添加到表中。这是我建议这样做的方式，在两个单独的文件中创建 GUI 元素没有意义。

另一种解决方案是将已经输入的所有表单数据保存到本地 JavaScript 变量中，附加表格，然后将数据重新加载到表单字段中。

于 2010-04-19T17:31:40.533 回答
0

好吧，返回一个带有新数据的 JSON 对象似乎是最好的选择。然后，您可以使用它来合成额外的表格元素。

万一有人被迫获取纯 HTML 作为响应，可以使用var foo = document.createElement('div');，例如，然后执行foo.innerHTML = responseText;. 这将创建一个不附加到任何内容的元素，但托管已解析的 HTML 响应。
然后，您可以向下钻取foo元素，获取所需的元素并以对 DOM 友好的方式将它们附加到表中。

编辑：

好吧，我想我现在明白你的意思了。
wrapper是一个表格元素本身。节点位于 tbody 下，wrapper它是它的子节点lastChild（或者您可以在 Firefox 中通过其tBodies[0]成员访问它）。
然后，使用 tBody 元素，我认为你将能够得到你想要的。

顺便说一句，在将其子项附加到表之前，您不需要将包装器附加到文档中，因此无需隐藏它等。

于 2010-04-20T01:48:02.820 回答