javascript - 为什么 IE 和 Firefox 之间的 .html() 值存在差异(添加问题详细信息)

Question

我有这个表，我可以通过 jquery 的 .append() 生成动态行(其中输入 <type="text" /> 作为内容)，并将生成的 html 存储到 <input type="hidden" /> 中。通过 jquery 的 .html() 获取 html 并使用 .val() 将值添加到隐藏。

在 Internet Explorer 中，如果我在文本框中输入值，这些值也会包含在隐藏字段中，但在 Firefox 中，除了值之外的所有内容都存储在该字段中。

编辑:

所以，我的问题是:我应该使用什么方法来获取在 Firefox 中显示的值？

编辑:

以下是有关我的问题的更多详细信息:

该表的构造如下:

<table id="tblTest" class="testTable">
    <thead>
        <tr>
            <td>Product</td>
            <td>Quantity</td>
            <td>Remove TR</td>
        </tr>
    </thead>
    <tbody id="tblTestTR">
    </tbody>
    <tfoot>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tfoot>
</table>
<input type="button" id="btnTest" value="Add Table Row" />&nbsp;<input type="submit" id="btnSubmit" value="Submit Form" />
<input type="hidden" id="txtHTML" name="txtHTML" />

添加表格行的功能是:

function AddTR()
        {
            var txtBox = "<tr id='dynTR'><td><input type='text' class='textBoxes' value='' /></td><td><input type='text' class='textBoxes' value='0' /></td><td><input type='button' value='remove' /></td></tr>";
            x++;
            var oRow = $(txtBox);
            $(this).append(oRow);

            oRow.find("input[type=\"button\"]").click(function ()
            {
                $(this).closest("tr").remove();
            });
        }

并获取 <tbody> 的 HTML是:

function GetInnerHTML(node)
        {
            alert(node.html());
            $("#txtHTML").val(node.html());
        }

Answer 1

读取输入元素值的正确方法是读取它们的实际值，而不是读取呈现它们的标记。您不能假设浏览器会更改标记来存储输入元素的值。

事实上 IE 似乎正在这样做，这真的很糟糕。请始终记住，IE 因违反标准而臭名昭著(即使是 IE9)。

IE 通过操作原始标记来存储状态的类似情况:读取相对链接的 href 属性将为您提供已解析的绝对 URL。只是为了让您了解这些怪癖有多么丰富......

不要将你的算法基于浏览器的怪癖，而是寻找正确的方法。尝试val() jQuery 提供的方法。