跨瀏覽器製作可編輯的表格工作

我一直在處理包含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的語句的各種組合，鏈接和避免鏈接，將其放置在頁面的底部，有人建議，註釋掉的代碼的各個部分出絕望的絕望。仍然是納達。

來源

2013-05-30 Wim Ombelets

我有一個快速的樣子，但是當編輯框中的焦點丟失時，元素被替換爲'，它不會顯示在客戶端上。此外，'id'應該是唯一的，並且頁面上有多個'id =「btnSaveInvNrFormat」 - 這很可能是問題的原因，因爲嘗試通過（唯一）id查找元素會讓jQuery困惑。 – andyb

在IE10中沒有辦法使html()方法正確替換html，儘管我從來沒有找到確切的原因。我最終寫了兩個元素到表格單元格中，其中一個設置爲style="display:none"，並使用show()/hide()，這對我來說已經足夠好了（而且對於IE10也是如此）。

對於任何遇到相同問題的人：這是一個變通辦法，而不是最嚴格意義上的解決方案。

來源

2013-06-03 14:11:47

跨瀏覽器製作可編輯的表格工作

回答

相關問題