FrozenGrid-6 .htm
<html>
<head>
<script type="text/javascript" src="FrozenGrid-6.js"></script>
<div id="good:C11_grid">
<strong>
<script type="text/javascript">
ff();
//排序方法
function sortTable() {
//省略了一些代码
ff();
}
</script>
</strong>
</div>
</head>
<body>
</body>
</html>FrozenGrid-6.js
    function ff()
    {  
     var parNode = document.createElement("table");
parNode.setAttribute("id", "tableID");
     //var parNode = document.getElementById("table1"); 
var tableTlThead = document.createElement("thead");
var tr1 = document.createElement("tr"); //新建一个tr类型的Element节点
var td1 = document.createElement("td"); //新建一个td类型的Element节点
      td1.appendChild(document.createTextNode("thead1"));
tr1.appendChild(td1);
var td1 = document.createElement("td"); //新建一个td类型的Element节点
      td1.appendChild(document.createTextNode("thead2"));
      tr1.appendChild(td1);
      tableTlThead.appendChild(tr1);
      parNode.appendChild(tableTlThead);
        
   //定位到table上
      tbody = document.createElement("TBODY");
      var tr2= document.createElement("tr"); //新建一个tr类型的Element节点
      var td2 = document.createElement("td"); //新建一个td类型的Element节点
      td2.appendChild(document.createTextNode("1"));
      tr2.appendChild(td2);
      var td2 = document.createElement("td"); //新建一个td类型的Element节点
      td2.appendChild(document.createTextNode("1"));
      tr2.appendChild(td2);
      tbody.appendChild(tr2);
      
      var tr3= document.createElement("tr"); //新建一个tr类型的Element节点
      var td3 = document.createElement("td"); //新建一个td类型的Element节点
      td3.appendChild(document.createTextNode("2"));
      tr3.appendChild(td3);
      var td3 = document.createElement("td"); //新建一个td类型的Element节点
      td3.appendChild(document.createTextNode("2"));
      tr3.appendChild(td3);
      tbody.appendChild(tr3);
      
      var tr3= document.createElement("tr"); //新建一个tr类型的Element节点
      var td3 = document.createElement("td"); //新建一个td类型的Element节点
      td3.appendChild(document.createTextNode("3"));
      tr3.appendChild(td3);
      var td3 = document.createElement("td"); //新建一个td类型的Element节点
      td3.appendChild(document.createTextNode("3"));
      tr3.appendChild(td3);
      tbody.appendChild(tr3);
      
      var tr3= document.createElement("tr"); //新建一个tr类型的Element节点
      var td3 = document.createElement("td"); //新建一个td类型的Element节点
      td3.appendChild(document.createTextNode("4"));
      tr3.appendChild(td3);
      var td3 = document.createElement("td"); //新建一个td类型的Element节点
      td3.appendChild(document.createTextNode("4"));
      tr3.appendChild(td3);
      tbody.appendChild(tr3);      parNode.appendChild(tbody);
      
var innerHtml = parNode.outerHTML;
document.write(innerHtml);

var parNode=document.getElementById("tableID");
var firstRow = parNode.rows[0];
var cellCount = firstRow.cells["length"];
for(var i=0;i<cellCount;i++){
firstRow.cells[i].onclick = sortTable;
}
}第一次点击表头时,可以按照当前列进行排序,再次点击表头时,就没有反应了,查看了一下源码,结果源码发生了变化,请问各位高手,如何修改才能每次点击表头时都能按照当前列排序?谢谢!

解决方案 »

  1.   

    改变后的源码,其实就是js动态生成的htm源码
      

  2.   

    生成后的代码因为又一次调用了document.write方法,就把以前的页面内容都冲掉了,包括你的脚本你可以看一下运行后的源码
      

  3.   

    但是,怎么能防止document.write把以前的页面内容都冲掉呢,或者采用别的方式实现排序功能?
      

  4.   

    var innerHtml = parNode.outerHTML;
    document.write(innerHtml);把innerHtml变为全局变量,然后在body中输出,而不是在函数中调用document.write(innerHtml);
      

  5.   

    <html>
    <head>
    <script type="text/javascript" src="FrozenGrid-6.js"></script>
    <div id="good:C11_grid">
    <strong>
    <script type="text/javascript">
    var innerHtml;
    ff();
    //排序方法
    function sortTable() {
    //省略了一些代码
    ff();
    }
    </script>
    </strong>
    </div>
    </head>
    <body>
    <script type='text/javscript'>
    document.write(innerHtml);//执行添加函数处理
    AddEvent();
    </script>
    </body>
    </html>FrozenGrid-6.js
        function ff()
        {  
        var parNode = document.createElement("table");
    parNode.setAttribute("id", "tableID");
        //var parNode = document.getElementById("table1"); 
    var tableTlThead = document.createElement("thead");
    var tr1 = document.createElement("tr"); //新建一个tr类型的Element节点
    var td1 = document.createElement("td"); //新建一个td类型的Element节点
          td1.appendChild(document.createTextNode("thead1"));
    tr1.appendChild(td1);
    var td1 = document.createElement("td"); //新建一个td类型的Element节点
          td1.appendChild(document.createTextNode("thead2"));
          tr1.appendChild(td1);
          tableTlThead.appendChild(tr1);
          parNode.appendChild(tableTlThead);
            
      //定位到table上
          tbody = document.createElement("TBODY");
          var tr2= document.createElement("tr"); //新建一个tr类型的Element节点
          var td2 = document.createElement("td"); //新建一个td类型的Element节点
          td2.appendChild(document.createTextNode("1"));
          tr2.appendChild(td2);
          var td2 = document.createElement("td"); //新建一个td类型的Element节点
          td2.appendChild(document.createTextNode("1"));
          tr2.appendChild(td2);
          tbody.appendChild(tr2);
          
          var tr3= document.createElement("tr"); //新建一个tr类型的Element节点
          var td3 = document.createElement("td"); //新建一个td类型的Element节点
          td3.appendChild(document.createTextNode("2"));
          tr3.appendChild(td3);
          var td3 = document.createElement("td"); //新建一个td类型的Element节点
          td3.appendChild(document.createTextNode("2"));
          tr3.appendChild(td3);
          tbody.appendChild(tr3);
          
          var tr3= document.createElement("tr"); //新建一个tr类型的Element节点
          var td3 = document.createElement("td"); //新建一个td类型的Element节点
          td3.appendChild(document.createTextNode("3"));
          tr3.appendChild(td3);
          var td3 = document.createElement("td"); //新建一个td类型的Element节点
          td3.appendChild(document.createTextNode("3"));
          tr3.appendChild(td3);
          tbody.appendChild(tr3);
          
          var tr3= document.createElement("tr"); //新建一个tr类型的Element节点
          var td3 = document.createElement("td"); //新建一个td类型的Element节点
          td3.appendChild(document.createTextNode("4"));
          tr3.appendChild(td3);
          var td3 = document.createElement("td"); //新建一个td类型的Element节点
          td3.appendChild(document.createTextNode("4"));
          tr3.appendChild(td3);
          tbody.appendChild(tr3);      parNode.appendChild(tbody);innerHtml = parNode.outerHTML;
       }
    }
    function AddEvent()//将你的事件处理提取出来
    {
     var parNode=document.getElementById("tableID");
     var firstRow = parNode.rows[0];
     var cellCount = firstRow.cells["length"];
     for(var i=0;i<cellCount;i++){
     firstRow.cells[i].onclick = sortTable;
    }