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

【问题标题】：Making editable table work cross-browser使可编辑的表格跨浏览器工作
【发布时间】：2013-05-25 16:38:27
【问题描述】：

我一直在处理一个包含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 语句的各种组合，链接和避免链接，按照某人的建议将其放在页面底部，出于绝望而注释掉代码的各个部分。还是纳达。

【问题讨论】：

我快速浏览了一下，但是当焦点在编辑框上丢失时，该元素被替换为<asp:Label ID="lblInvoiceNumber" runat="server" />，它不会显示在客户端上。此外，id 应该是唯一的，并且页面上有多个 id="btnSaveInvNrFormat" - 这很可能是问题的原因，因为 jQuery 在尝试通过（唯一）id 查找元素时会感到困惑。

标签： javascript jquery asp.net cross-browser

【解决方案1】：

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

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

【讨论】：