程序猿解决问题1-table赋值

随之div的强大，table布局已经越来越少了，但是表格在页面中却用的很多，我们常常要动态的生成各种各样的表格，而且还得给表格赋值，给表表格添加事件，当然也可以用一些插件式的table，如jqgrid，datatable等，可是遇到自定义表格就比较悲剧了。

这里分享我写一个表格的做法：

1.确定表格一个单元的样式，可以通过循环把其他的表格给循环出来。

2.确定你要得到的数据，通过json的数据格式穿过来。

随之div的强大，table布局已经越来越少了，但是表格在页面中却用的很多，我们常常要动态的生成各种各样的表格，而且还得给表格赋值，给表表格添加事件，当然也可以用一些插件式的table，如jqgrid，datatable等，可是遇到自定义表格就比较悲剧了。

function edittable(){     $('#regntable').html('');     $('#regntable').append(    "<tr style='height:15px'>"+    "<td width='36'>科室</td>"+      "<td width='69'>专家/号别</td>"+     "<td width='10%'>时段</td>"+    "<td width='10%'>周一/"+jsondata.week0+"</td>"+    "<td width='10%'>周二/"+jsondata.week1+"</td>"+     "<td width='10%'>周三/"+jsondata.week2+"</td>"+    "<td width='10%'>周四/"+jsondata.week3+"</td>"+       "<td width='10%'>周五/"+jsondata.week4+"</td>"+    "<td width='10%'>周六/"+jsondata.week5+"</td>"+    "<td width='10%'>周日/"+jsondata.week6+"</td>"+        "</tr>"        );        for(var i=0;i<jsondata.subspecialty.length;i++){       // id='"+i+''+0+''+1+''+0+"       //json中的i科室，j（或者是0）是医生,1-6代表周一到周六（0代表周日）  0,1,2 分别是上下全天//         var careName0 = jsondata.subspecialty[i].careprovider[0].careName == undefined ? "" : jsondata.subspecialty[i].careprovider[0].careName;        $("#regntable").append(        "<tr>"+//             "<td rowspan='"+jsondata.subspecialty[i].careprovider.length*3+"'>"+jsondata.subspecialty[i].subname+"</td>"+//             "<td rowspan='"+jsondata.subspecialty[i].careprovider.length+"'><p>"+jsondata.subspecialty[i].careprovider[0].careName+"</p><p>（知名专家）</p></td>"+            "<td rowspan='"+jsondata.subspecialty[i].careprovider.length*3+"'>"+jsondata.subspecialty[i].subname+"</td>"+            "<td rowspan='3'><p>"+jsondata.subspecialty[i].careprovider[0].careName+"</p></td>"+            "<td width='10%'>上午</td>"+            "<td  width='10%' id='"+i+'-'+0+'-'+1+'-'+0+"'> </td>"+            "<td  width='10%' id='"+i+'-'+0+'-'+2+'-'+0+"'> </td>"+            "<td  width='10%' id='"+i+'-'+0+'-'+3+'-'+0+"'> </td>" +            "<td  width='10%' id='"+i+'-'+0+'-'+4+'-'+0+"'> </td>"+            "<td  width='10%' id='"+i+'-'+0+'-'+5+'-'+0+"'> </td>"+            "<td  width='10%' id='"+i+'-'+0+'-'+6+'-'+0+"'> </td>"+            "<td  width='10%' id='"+i+'-'+0+'-'+0+'-'+0+"'> </td>"+          "</tr>"+          "<tr>"+  "<td width='10%'>下午</td>"+  "<td  width='10%' id='"+i+'-'+0+'-'+2+'-'+1+"'> </td>"+  "<td  width='10%' id='"+i+'-'+0+'-'+2+'-'+1+"'> </td>"+  "<td  width='10%' id='"+i+'-'+0+'-'+2+'-'+1+"'> </td>"+  "<td  width='10%' id='"+i+'-'+0+'-'+2+'-'+1+"'> </td>"+  "<td  width='10%' id='"+i+'-'+0+'-'+2+'-'+1+"'> </td>"+  "<td  width='10%' id='"+i+'-'+0+'-'+2+'-'+1+"'> </td>"+  "<td  width='10%' id='"+i+'-'+0+'-'+2+'-'+1+"'> </td>"+  "</tr>"+  "<tr>"+  "<td width='10%'>全天</td>"+  "<td  width='10%' id='"+i+'-'+0+'-'+1+'-'+2+"'> </td>"+  "<td  width='10%' id='"+i+'-'+0+'-'+2+'-'+2+"'> </td>"+  "<td  width='10%' id='"+i+'-'+0+'-'+3+'-'+2+"'> </td>"+  "<td  width='10%' id='"+i+'-'+0+'-'+4+'-'+2+"'> </td>"+  "<td  width='10%' id='"+i+'-'+0+'-'+5+'-'+2+"'> </td>"+  "<td  width='10%' id='"+i+'-'+0+'-'+6+'-'+2+"'> </td>"+  "<td  width='10%' id='"+i+'-'+0+'-'+0+'-'+2+"'> </td>"+     "</tr>"          );        for(var k = 0;k<jsondata.subspecialty[i].careprovider[0].regnschema.length;k++){        var bookedQty = jsondata.subspecialty[i].careprovider[0].regnschema[k].bookedQty;        var bookingEnableQty = jsondata.subspecialty[i].careprovider[0].regnschema[k].bookingEnableQty;        var weekday = jsondata.subspecialty[i].careprovider[0].regnschema[k].weekday;        var timerange = jsondata.subspecialty[i].careprovider[0].regnschema[k].timerange;        var trid  = '#'+i+'-'+0+'-'+weekday+'-'+timerange;        var subspecialty = jsondata.subspecialty[i].subname;        var carename = jsondata.subspecialty[i].careprovider[0].careName;        var id = jsondata.subspecialty[i].careprovider[0].regnschema[k].id;        var regenName = jsondata.subspecialty[i].careprovider[0].regnschema[k].regenName;        if(jsondata.subspecialty[i].careprovider[0].regnschema[k].stopInd){        var content ='<font color="red">'+ bookingEnableQty+'-'+bookedQty+'</font><div id="child" class="hidden">'+subspecialty+'|'+carename+'|'+id+'</div>';        }else{        var content = bookingEnableQty+'-'+bookedQty+'<div id="child" class="hidden">'+subspecialty+'|'+carename+'|'+id+'</div>';        }        $(trid).html(content);        }                // 迭代医生      for(var j=1;j<jsondata.subspecialty[i].careprovider.length;j++){        var careNamekj = jsondata.subspecialty[i].careprovider[j].careName;        $("#regntable").append(        "<tr>"+        "<td rowspan='3'><p>"+careNamekj+"</p></td>"+        "<td width='10%'>上午</td>"+        "<td width='10%' id='"+i+'-'+j+'-'+1+'-'+0+"'> </td>"+        "<td width='10%' id='"+i+'-'+j+'-'+2+'-'+0+"'> </td>"+        "<td width='10%' id='"+i+'-'+j+'-'+3+'-'+0+"'> </td>"+        "<td width='10%' id='"+i+'-'+j+'-'+4+'-'+0+"'> </td>"+        "<td width='10%' id='"+i+'-'+j+'-'+5+'-'+0+"'> </td>"+        "<td width='10%' id='"+i+'-'+j+'-'+6+'-'+0+"'> </td>"+        "<td width='10%' id='"+i+'-'+j+'-'+0+'-'+0+"'> </td>"+        "</tr>"+        "<tr>"+        "<td width='10%'>下午</td>"+        "<td  width='10%' id='"+i+'-'+j+'-'+1+'-'+1+"'> </td>"+        "<td  width='10%' id='"+i+'-'+j+'-'+2+'-'+1+"'> </td>"+        "<td  width='10%' id='"+i+'-'+j+'-'+3+'-'+1+"'> </td>"+        "<td  width='10%' id='"+i+'-'+j+'-'+4+'-'+1+"'> </td>"+        "<td  width='10%' id='"+i+'-'+j+'-'+5+'-'+1+"'> </td>"+        "<td  width='10%' id='"+i+'-'+j+'-'+6+'-'+1+"'> </td>"+        "<td  width='10%' id='"+i+'-'+j+'-'+0+'-'+1+"'> </td>"+        "</tr>"+        "<tr>"+        "<td width='10%'>全天</td>"+        "<td  width='10%' id='"+i+'-'+j+'-'+1+'-'+2+"'> </td>"+        "<td  width='10%' id='"+i+'-'+j+'-'+2+'-'+2+"'> </td>"+        "<td  width='10%' id='"+i+'-'+j+'-'+3+'-'+2+"'> </td>"+        "<td  width='10%' id='"+i+'-'+j+'-'+4+'-'+2+"'> </td>"+        "<td  width='10%' id='"+i+'-'+j+'-'+5+'-'+2+"'> </td>"+        "<td  width='10%' id='"+i+'-'+j+'-'+6+'-'+2+"'> </td>"+        "<td  width='10%' id='"+i+'-'+j+'-'+0+'-'+2+"'> </td>"+        "</tr>"        );        for(var k = 0;k<jsondata.subspecialty[i].careprovider[j].regnschema.length;k++){            var bookedQty = jsondata.subspecialty[i].careprovider[j].regnschema[k].bookedQty;            var bookingEnableQty = jsondata.subspecialty[i].careprovider[j].regnschema[k].bookingEnableQty;            var weekday = jsondata.subspecialty[i].careprovider[j].regnschema[k].weekday;            var timerange = jsondata.subspecialty[i].careprovider[j].regnschema[k].timerange;            var trid  = '#'+i+'-'+j+'-'+weekday+'-'+timerange;            var subspecialty = jsondata.subspecialty[i].subname;            var carename = careNamekj;            var id = jsondata.subspecialty[i].careprovider[j].regnschema[k].id;            if(jsondata.subspecialty[i].careprovider[j].regnschema[k].stopInd){            var content ='<font color="red">'+ bookingEnableQty+'-'+bookedQty+'</font><div id="child" class="hidden">'+subspecialty+'|'+carename+'|'+id+'</div>';            }else{            var content = bookingEnableQty+'-'+bookedQty+'<div id="child" class="hidden">'+subspecialty+'|'+carename+'|'+id+'</div>';            }            $(trid).html(content);            }        }        }                addclick();     }

通过给每个td的id付有意义值的方式，实现一些功能，传递一些数据。