Question

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

到目前为止，这就像Chrome中的魅力一样，但在IE10中没有任何乐趣。

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

在IE中，文本框不会出现。有趣的细节：如果我注释掉四个变量（invNr，newInvNr，oldHtml和spanWidth），input元素 DOES 出现在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语句的各种组合，链接和避免链接，将其放在页面底部，就像有人建议的那样，从纯粹的绝望中评论出代码的各个部分。还是nada。

Answer 1

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

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

使可编辑的表跨浏览器工作

1 个答案: