javascript - 使可编辑表格跨浏览器工作

Question

我一直在处理包含 ListView 的 ASP.NET 页面。当用户单击一行时，此(一旦解析)HTML table 的最后(可见)列的内容将替换为文本框(通过 jQuery)，使值可编辑。

到目前为止，这在 Chrome 中就像一个魅力，但在 IE10 中却没有乐趣。

在this jsfiddle ，该值变为可编辑，但随后“保存”按钮无法按预期工作。

在 IE 中，文本框不会出现。有趣的细节:如果我注释掉四个变量(invNr、newInvNr、oldHtml 和 spanWidth)，input 元素 确实 出现在 IE10 中，但我当然没有数据可以使用。真的很奇怪。

jQuery:

$(document).ready(function () {
    $('tr[id*="itemRow"]').click(function () {
        $clickedRow = $(this);

        //this makes sure the input field isn't emptied when clicked again
        if ($clickedRow.find('input[id$="editInvNr"]').length > 0) {
            return;
        }

        var invNr = $clickedRow.find('span[id$="InvoiceNumber"]').text(),
            newInvNr = '',
            oldHtml = $clickedRow.find('span[id$="InvoiceNumber"]').html(),
            spanWidth = $clickedRow.find('span[id$="InvoiceNumber"]').width();

        $clickedRow.find('span[id$="InvoiceNumber"]').parent('td').html('<input type="text" ID="editInvNr"></input>');
        $clickedRow.find('input[id="editInvNr"]').val(invNr).focus().on('input propertychange', function () {
            $clickedRow.find('span[id$="SaveResultMsg"]').hide();
            $clickedRow.find('td[id$="SaveOption"]').show();
            $clickedRow.find('input[id*="btnSaveInvNrFormat"]').show();
            newInvNr = $(this).val();
            if (newInvNr == $clickedRow.find('span[id$="InvoiceNumber"]').text()) {
                $clickedRow.find('td[id$="SaveOption"]').hide();
            }
        });
    });

    $('tr[id*="itemRow"]').focusout(function () {
        $rowLosingFocus = $(this);
        var previousValue = $rowLosingFocus.find('input[id$="editInvNr"]').val();
        $rowLosingFocus.find('input[id$="editInvNr"]').closest('td').html('<asp:Label ID="lblInvoiceNumber" runat="server" />');
        $rowLosingFocus.find('span[id$="InvoiceNumber"]').text(previousValue);
    });
});

function UpdateInvoiceNrFormat(leButton) {
    $buttonClicked = $(leButton);
    $buttonClicked.focus();

    var companyName = $buttonClicked.closest('tr').find('span[id$="lblCompanyName"]').text(),
        invoiceType = $buttonClicked.closest('tr').find('span[id$="lblInvoiceType"]').text(),
        invNrFormat = $buttonClicked.closest('tr').find('span[id$="lblInvoiceNumber"]').text();

    PageMethods.UpdateInvoiceNumberFormat(companyName, invoiceType, invNrFormat, onSuccess, onError);
    function onSuccess(result) {
        $buttonClicked.hide();
        $buttonClicked.siblings('span[id$="SaveResultMsg"]').text(result).show();
    }
    function onError(result) {
        $buttonClicked.hide();
        $buttonClicked.siblings('span[id$="SaveResultMsg"]').text('Error:' + result).show();
    }
}

我已经尝试了 jQuery 语句的各种组合，链接和避免链接，按照某人的建议将其放在页面底部，出于绝望而注释掉代码的各个部分。还是虚无。

Answer 1

没有办法让 html() 方法在 IE10 中正确地替换 html，尽管我一直没有找到确切的原因。我最终将这两个元素写入表格单元格，为其中之一设置 style="display:none" 并使用 show()/hide() 这对我来说已经足够了(显然对 IE10 也是如此)。

对于遇到相同问题的任何人:这是一个解决方法，不是最严格意义上的解决方案。