js或Jquery高手进

废话不说，大概是这样的，给一个table，id为XX,要求通过Jquery或JS在Html上动态为table创建行列，并且有RowSpan和columspan属性！本人对Jquery不熟悉。用Js做的！ 我的大致思路是，先整体在页面上线输出这个Table，然后再给每个单元格追加RowSpan和columspan属性！以下是代码：
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Print Table</title>
    <script type="text/javascript" src="jquery-1.4.3.js"></script>
<script type="text/javascript">
    
    var jsaonStr=[     
   {  
               name:'LoadTest1',
               tdSpan:{columspan:2}//{columspan:2}   //,rowspan:2
   },
   {           name:'LoadTest2',
               tdSpan:{}  
    },
   {           name:'LoadTest3',
               tdSpan:{}//columspan:2}   
    },
   {           name:'LoadTest4',
               tdSpan:{}//columspan:2}   
   }];
  var tdArray=new Array();  //记录需要跨行跨列的数组
  var columsNum=4;   //动态列数
  var rowNum=7;      //动态行数
  var nextrow;      //记录跨行
  var nextcolum;    //记录跨列
  $(function(){
       for(var r=0;r<rowNum;r++)
       {
            $("#tableBody").append('<tr id=tr'+r+'></tr>');
            for(var d=0;d<columsNum;d++)
            {
                var columspan=eval((jsaonStr)[d]).tdSpan.columspan;  //columspan
        var rowspan=eval((jsaonStr)[d]).tdSpan.rowspan;    //rowspan   
    $("#tr"+r).append('<td id=td'+r+d+'></td>');
    $("#td"+r+d).append('<div id='+eval((jsaonStr)[d]).name+'>'+eval((jsaonStr)[d]).name+'</div>');
if(columspan!=undefined&&rowspan!=undefined)  //跨行跨列
    { 
    $("#td"+r+d).attr("columspan",columspan);
    $("#td"+r+d).attr("rowspan",rowspan);
    nextrow=r+1;
    nextcolum=d+1;
    if(nextcolum==columsNum)continue;
    //$("#td"+r+nextcolum).attr("visible",false);//设置下一个单元格隐藏
    tdArray.push("#td"+r+nextcolum);
    if(nextrow==rowNum)continue;
    //$("#td"+nextrow+nextcolum).attr("visible",false);//设置下一行的单元格隐藏
    tdArray.push("#td"+nextrow+d);
   
    }
    else if(columspan==undefined&&rowspan!=undefined) //跨行不跨列
    {
    $("#td"+r+d).attr("rowspan",rowspan);
     nextrow=r+1;
     //nextcolum=d+1;
     if(nextrow==rowNum)continue;
                //$("#td"+nextrow+nextcolum).attr("visible",false);
                tdArray.push("#td"+nextrow+d);
    }
    else if(columspan!=undefined&&rowspan==undefined)  //跨列不跨行
    {
        $("#td"+r+d).attr("columspan",columspan);
                    nextcolum=d+1;
                    if(nextcolum==columsNum)continue;
                   // $("#td"+r+nextcolum).attr("visible",false);
                    tdArray.push("#td"+r+nextcolum);
    }
    else
    {
       //不跨行不跨列
    }
            }     
       }
         for(var i=0;i<tdArray.length;i++)
         {
             $(tdArray[i]).attr("visble",false);//分别设置每个单元格
         }        alert($("#tableBody").html());
 });
</script>
</head>
<body>
 <table id="tableBody" border="1">
  
 </table>
</body>
</html>

解决方案 »

  1.   

    是有点乱，不好意思
    主要就是设置rowspan和columspan属性时候 不好弄！！！
      

  2.   

    某个单元格的属性columspan =  rowspan =  
     就这个不好控制！
      

  3.   

    我把rowspan 和 columspan 属性封装到了一个数组jsaonStr中
      

  4.   

    画表格可以先把整个表格body和title画出来,然后在一行行的画数据,在画的过程中把这些属性添加进去
      

  5.   

    比如第一行第一个单元格添加了 columspan=2 属性 那么就要设置下一个单元格隐藏。。
      

  6.   

    用jquery 可以动态 插入 html  现在 js 里把标签写好就可以了
      

  7.   


    var html='';
    html+='<tr><td rowSpan=""colspan="1"></td></tr>'
    $("#id").append(html)
      

  8.   

    如果要动态插入 属性的话 就用 each
    $(td).each(function(i){
    this.attr("RowSpan","")
    this,attr("colspan","")
    })