IE hiển thị không đúng nội dung động cho đến khi thay đổi biểu định kiểu được thực hiện

Question

Tôi có bảng dữ liệu được tạo động với Javascript. Cứ sau vài phút, trang sẽ làm mới dữ liệu bằng cách kích hoạt một yêu cầu Ajax, lấy lại dữ liệu từ máy chủ và thay thế dữ liệu trong bảng. Đây là tiêu chuẩn đẹp, và bảng kết thúc lên tim như thế này:.

này chỉ hoạt động tốt nếu tôi tạo ra các dữ liệu bằng cách làm sạch bàn và từng bước bổ sung các hàng trở lại trong Tuy nhiên, bảng này có thể có khả năng có hàng nghìn hàng và có thể mất nhiều thời gian để tạo bảng mà trình duyệt cung cấp cho người dùng lỗi "Tập lệnh này mất quá nhiều thời gian để thực thi". Vì vậy, tôi đã khắc phục điều này bằng cách phá vỡ việc tạo bảng thành các khối và làm một chút tại một thời điểm bằng cách sử dụng setInterval.

Điều này làm việc tốt, nhưng vì bảng có thể mất một thời gian để được tạo ra hoàn toàn, tôi đã cố gắng thông minh và thực hiện một số bộ đệm đôi giả. Tôi có một bảng thứ hai có display thiết lập để none để ẩn nó, và khi tôi tái tạo bảng tôi thêm các hàng vào bảng ẩn một chút tại một thời điểm. Bằng cách này, dữ liệu hiện có được hiển thị cho người dùng cho đến khi việc tạo lại bảng hoàn tất, tại thời điểm đó chúng tôi chỉ thay thế nó bằng nội dung mới của chúng tôi cùng một lúc.

tôi đang làm thay thế của tôi với các dòng mã sau đây

$("#loading_area tbody").children().appendTo($("#unplanned tbody").empty()); 

này chỉ hoạt động tốt trên Firefox, Safari và Google Chrome. Nhưng trên IE, tôi nhận được như sau:

Những hàng đang thực sự không trống - nội dung là có nếu tôi cuộn theo chiều ngang đủ:

Dường như cột đầu tiên rộng hơn 55.000 pixel! Và đây là phần thực sự kỳ lạ: nội dung hiển thị lại đúng ngay khi tôi thay đổi BẤT KTH về kiểu dáng của bảng. Vì vậy, nếu tôi thay đổi màu phông chữ thành màu xanh lá cây, IE sẽ ngay lập tức hiển thị lại bảng, chính xác.

Nhưng tôi không thể thực hiện thay đổi trực tiếp. Vì vậy, nếu tôi nói

$("#unplanned").css("color", "green"); 

thì nó sẽ không hiển thị lại chính xác; màu sắc thay đổi, nhưng cột đầu tiên vẫn rộng 55.000 pixel. Nhưng nếu tôi thực hiện thay đổi trực tiếp cho biểu định kiểu

thì nó sẽ hiển thị lại bảng, chính xác.

Vì vậy, tôi đã kết thúc việc sửa lỗi này bằng cách thực hiện thay đổi kiểu ngẫu nhiên, chuyển đổi giữa nút Mở rộng/Thu gọn giữa 1px và 0px, mỗi khi tôi hoàn thành việc đặt bảng và thao tác này.

Vấn đề của tôi là khi tôi cố gắng in trang, các hàng trống, vì nội dung trang được hiển thị không chính xác cho máy in.

Vì vậy, tôi sẽ cố gắng nhiều hơn nữa, có thể chỉ cần chuyển đổi bảng nào được hiển thị và hoán đổi id s của chúng hoặc bất kỳ thứ gì làm việc này. Câu hỏi của tôi là, những gì đang xảy ra ở đây?Điều này có vẻ giống như một lỗi trong IE; Tôi đang sử dụng IE8 nhưng điều này tương tự xảy ra trên IE6 và IE7. Tôi muốn tránh rơi vào hố này trong tương lai, nhưng tôi không chắc chắn điều gì gây ra điều này, vì vậy tôi không thực sự chắc chắn những gì tôi nên tránh. Bất kỳ ánh sáng mà bất cứ ai có thể đổ về điều này sẽ được nhiều đánh giá cao.

EDIT: Hoán đổi bảng nào được hiển thị khiến cho sự cố hiển thị biến mất trong trình duyệt mà không cần bản hack biểu định kiểu, nhưng sự cố khi in vẫn ở đó. Trong thực tế, vấn đề in ấn là có ngay cả khi bảng được tạo ra trực tiếp mà không có hiện/ẩn hoặc yếu tố di chuyển thủ đoạn nào cả. Vì vậy, tôi chắc chắn bối rối và không chắc chắn những gì tôi có thể làm để làm cho vấn đề này biến mất. Tôi có thể phải tạo một trang tĩnh, riêng biệt chỉ để in nếu tôi không thể hiểu được điều này.

Answer 1

Không thể nói chắc chắn mà không có một trường hợp thử nghiệm, nhưng nói chung:

• Hãy chắc chắn rằng bạn đang sử dụng table-layout: fixed. IE là xấu tại đoán auto chiều rộng cột, đặc biệt là khi có colspans tham gia. Nó cũng chậm khi đoán chiều rộng khi có nhiều hàng. Đưa điều này ra khỏi bàn tay của IE bằng cách đặt kích thước rõ ràng cho mỗi cột với bố cục bảng cố định.

• Tránh thêm hàng vào bảng lớn. Khi bạn nói children().appendTo() jQuery vẫn đang thực hiện mỗi lần chắp thêm một lần, điều này nhanh chóng thực sự rất chậm. Điều tốt nhất bạn có thể làm để tăng tốc thao tác bảng là đặt toàn bộ lô trong một lần sử dụng innerHTML trên phần tử cha của bảng. Tất nhiên chuẩn bị chuỗi HTML có thể gây phiền nhiễu nếu bạn muốn chèn dữ liệu (các giá trị thuộc tính và nội dung), vì nó phải được thoát HTML. Giải pháp thay thế là viết tất cả các hàng cùng một lúc với giá trị trình giữ chỗ và sau đó điền vào dữ liệu thực thứ hai bằng cách đặt .data trên các nút Văn bản, v.v. Bạn sẽ cần phải đính kèm lại bất kỳ trình xử lý sự kiện nào mà bạn đang đặt trên các nút đó trong bước này, trừ khi bạn đang sử dụng trực tiếp.

• Tôi nghĩ rằng bằng cách viết các hàng với innerHTML, bạn sẽ có thể tăng tốc độ đủ để loại bỏ các bản cập nhật một phần thời gian chờ (điều này dường như có những điều kiện khó khăn tiềm ẩn). Tất nhiên, thay thế dựa trên DOM sẽ chỉ cập nhật các hàng đã thay đổi. Khi bạn đang sử dụng bố cục cố định, vì chiều rộng không phụ thuộc vào nội dung, bạn có thể chia bảng của bạn thành nhiều bảng sau mỗi bảng.Họ sẽ trông giống như họ là một bảng, nhưng bạn có thể đối phó với từng bảng riêng biệt, hoặc viết innerHTML của nó trong một lần, hoặc gắn thêm các hàng của nó mà không có cái chết hiệu năng DOM mà bạn nhận được từ việc có hàng nghìn hàng trong một bảng.

Answer 2

Bạn chỉ có thể có hai phần tử tbody trong bảng chính của mình. Một sẽ được sử dụng để hiển thị, và một cho đệm. Bằng cách đó, bạn có thể bỏ qua việc thêm tbody khác và chỉ cần xóa display.none khỏi bộ đệm để hiển thị nó. Tôi đoán là nó có thể nhanh hơn một chút và có lẽ giải quyết được sự cố trong IE.

Một phương pháp khác (lừa?) Cho hiển thị hoặc ẩn các yếu tố trong một bảng Tôi đã học được thiết position để absolute trên một hàng hoặc tbody để che giấu nó, thay vì sử dụng display. Điều đó vẫn ẩn nó, nhưng không thay đổi (rối tung) bố cục của bảng. Bạn có thể thử sử dụng nó để ẩn bộ đệm.

Nói chung, bảng là một trong những yếu tố kỳ quặc nhất, ngay cả trong các trình duyệt hiện đại. Làm bất cứ điều gì tiên tiến với họ thường dẫn đến những cơn đau đầu ít ỏi này, thật may mắn.

Answer 3

Bạn đã đặt chiều rộng trên bảng chưa? Nó xảy ra với tôi rằng nếu bạn đang tạo bảng trong khi nó ẩn nó có thể không được chọn lên những thứ như chiều rộng cửa sổ trình duyệt hiện tại mà nó thường sẽ sử dụng để thiết lập chiều rộng của một bảng, do đó, nó rơi trở lại tối đa.