Javascript 跨浏览器制作可编辑表格

我一直在处理一个ASP.NET页面，其中包含一个

列表视图

。当用户单击一行时，该HTML

表的最后一列（可视）内容（一旦解析）将被替换为文本框（通过jQuery），使该值可编辑

到目前为止，这在Chrome中很有魅力，但在IE10中却没有乐趣

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

在IE中，文本框不会出现。有趣的细节：如果我注释掉四个变量（
invNr
，
newInvNr
，
oldHtml
和
spanWidth
），那么
输入
元素确实会出现在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();
    }
}

$（文档）.ready（函数（）{
$（'tr[id*='itemRow']）。单击（函数（）{
$clickedRow=$（此项）；
//这样可以确保再次单击时输入字段不会清空
如果（$clickedRow.find（'input[id$=“editInvNr”]'）。长度>0）{
返回；
}
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（“”）；
$clickedRow.find（'input[id=“editInvNr”]'）.val（invNr.focus（）.on（'input propertychange'，function（）{
$clickedRow.find（'span[id$=“saveResultsMg”]”）。hide（）；
$clickedRow.find（'td[id$=“SaveOption”]'）.show（）；
$clickedRow.find（'input[id*=“btnsaveinvrormat”]'）.show（）；
newInvNr=$（this.val（）；
if（newInvNr==$clickedRow.find（'span[id$=“InvoiceNumber”]'））.text（）{
$clickedRow.find（'td[id$=“SaveOption”]'）.hide（）；
}
});
});
$（'tr[id*='itemRow']）。focusout（函数（）{
$rowLosingFocus=$（此项）；
var-previousValue=$rowLosingFocus.find（'input[id$=“editInvNr”]'）.val（）；
$rowLosingFocus.find（'input[id$=“editInvNr”]'）。最近（'td'）。html（''；
$rowLosingFocus.find（'span[id$=“InvoiceNumber”]'）。文本（previousValue）；
});
});
函数updateInvoicenFormat（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.UpdateInvoiceNumber格式（公司名称、发票类型、发票格式、onSuccess、onError）；
函数onSuccess（结果）{
$buttonClicked.hide（）；
$buttonClicked.sides（'span[id$=“SaveResultMsg”]”）。text（result.show（）；
}
函数onError（结果）{
$buttonClicked.hide（）；
$buttonClicked.sides（'span[id$=“saveResultsMg”]”）。text（'Error:'+result.show（）；
}
}

我尝试了jQuery语句的各种组合，链接和避免链接，按照某人的建议将其放在页面底部，出于绝望注释代码的各个部分。仍然是nada。
没有办法让
html（）
方法在IE10中正确地替换html，尽管我从未找到确切的原因。最后，我将这两个元素都写入表单元格，为其中一个元素设置
style=“display:none”
，并使用
show（）
/
hide（）
，这对我来说已经足够好了（显然对IE10也是如此）

对于遇到相同问题的任何人：这是一个解决方法，不是严格意义上的解决方案。
我快速查看了一下，但是当焦点在编辑框上丢失时，元素被替换为
，它不会显示在客户端上。另外，
id
应该是唯一的，并且页面上有多个
id=“btnsaveinvrormat”
——这很可能是问题的原因，因为jQuery在试图通过（唯一）id查找元素时会感到困惑。