一种解决方法来修复与 jquery 1.3.2 中的 clone() 方法相关的 IE 错误

Question

我正在使用 Jquery 分页插件

http://plugins.jquery.com/project/pagination

对表格中的行进行分页。

我还使用另一个 SO 问题 here 中提供的小技巧来纠正原始示例中的错误...

该代码在 FireFox 和 Chrome 中运行良好，但在 IE6+ 中却不行...这是我的 javascript 来初始化和运行分页...

function pageselectCallback(page_index, jq){
              var items_per_page = pagination_options.items_per_page;
              var offset = page_index * items_per_page;
              var new_content = $('#hiddenresult tr.result').slice(offset, offset + items_per_page).clone();



               $('#Searchresult').empty().append(new_content);


              return false;
            }

            var pagination_options = {
                  num_edge_entries: 2,
                  num_display_entries: 8,
                  callback: pageselectCallback,
                  items_per_page:3
                }



            /**
             * Callback function for the AJAX content loader.
             */
            function initPagination() {
                var num_entries = $('#hiddenresult tr.result').length;
                // Create pagination element

                 $("#Pagination").pagination(num_entries, pagination_options);
            }

            // Load HTML snippet with AJAX and insert it into the Hiddenresult element
            // When the HTML has loaded, call initPagination to paginate the elements
            $(document).ready(function(){
                initPagination();
            });

表结构是

// Table to display the paginated data
<table>
  <tr>
   <td>
      <div id="Pagination" class="pagination">
      </div>
        <br style="clear:both;" />
      <div id="Searchresult" style="height:auto;">
      This content will be replaced when pagination inits.
     </div>
   </td>
 </tr>
</table>


// Table containing the rows that are to be paginated
<table id="hiddenresult" style="display:none;">
  <tr>
    <td>   

 <table>
      <tr> // 1st row
         <td>
             <table>
                <tr>
                   <td>
                   </td>
                </tr>
                <tr>
                   <td>
                   </td>
                </tr>
             </table>

             <table>
                 <thead>
                    <tr>
                    </tr> etc...
                 </thead>
                 <tbody>
                     <tr>

                     </tr> etc etc...
                 </tbody>
             </table>
         </td>
      </tr> // end 1st row

     <tr> //2nd row
         <td>
             <table>
                <tr>
                   <td>
                   </td>
                </tr>
                <tr>
                   <td>
                   </td>
                </tr>
             </table>

             <table>
                 <thead>
                    <tr>
                    </tr> etc...
                 </thead>
                 <tbody>
                     <tr>

                     </tr> etc etc...
                 </tbody>
             </table>
         </td>
      </tr> //end 2nd row

    etc etc etc....
    </table>

 </td>
</tr>
</table> // id = "hiddenresult"

我看到它的方式插件在 IE 中初始化，但错误在于显示分页行......但无法弄清楚它在哪里或如何更正它...... 非常感谢您的建议......

Answer 1

Graceful Degradation 是解决方案。 不要在 IE 中对表格进行分页，使其易于阅读。

Answer 2

与这个愚蠢的 IE Bug 战斗仍在失去头发....我发现了另一件事..如果它对任何人都有帮助..以防万一....

如上面的代码所示，我使用 slice() jquery 方法对隐藏内容进行切片并克隆它，将其保存到变量“new_content”，然后将其附加到 Searchresult div...显示...但查看“页面源代码”我可以看到正确的 html 代码....而且内容未显示在屏幕上很奇怪....

然后.. 我没有将切片内容存储到“new_content”，而是放了一些 html 代码，例如...

var new_content = "<table border=1> <tr> <td> hi </td> </tr> <tr> <td>  hello </td> </tr> <tr> <td> <img src=\"../uploads/sunset.jpg\" /> </td> </tr> </table>";

瞧……它已正确附加到 Searchresult div……并且 html 得到正确呈现，我可以在屏幕上看到表格和图像……

这让我猜测，clone() 方法返回的内容不能被 IE 呈现。如果是这样的话……有什么办法可以解决这种完全无能的好 ol' IE…… ?????

Answer 3

修复它...!!!

这是代码……！！

 function pageselectCallback(page_index, jq){
                var items_per_page = pagination_options.items_per_page;
                var offset = page_index * items_per_page;
                var new_content = $('#hiddenresult tr.result').slice(offset, offset + items_per_page).clone();


               if(navigator.appName == "Microsoft Internet Explorer"){
                   // This is to fix an IE bug that won't properly append the cloned html to the 
                   // Searchresult div. So we first append the cloned html to a dummy div and
                   // then use javascript innerhtml property to copy to the actual div.
                   $('#justDiv').empty().append(new_content);

                    var content = document.getElementById("justDiv").innerHTML;

                    document.getElementById("Searchresult").innerHTML = content;
              }
                else{
                    $('#Searchresult').empty().append(new_content);
                }


                return false;
            }

大家干杯...！！！

我知道这不是很整洁......我仍然愿意接受建议......所以......欢迎大家......谢谢