即时数据模块设计 版本V3

版本 V3

实现基准：自定义表头内容，根据表头，拼装table和tr、td等内容。

如图所示：这些就是表头，在模板里面可能不同比赛，不同描述，这个由编辑定义。

<a href="http://jooben.blog.51cto.com/attachment/201005/19/253727_1274230768JxjZ.png"></a>

代码如何实现呢？

基本上都是拼装html，刚刚利用了一次json对象，这次再来：

注释掉所有包含球员球队数据的table内容&lt;!----&gt;

定义如下数据：

var th_names_json = {"选手":"name","第一节":"section_1","第二节":"section_2","第三节":"section_3","第四节":"section_4","加时1":"overtime_1","加时2":"overtime_2","总分":"totalScore"};

这里就定义了这些内容：

&lt;tr&gt;

    &lt;th&gt;选手&lt;/th&gt;

    &lt;th&gt;第一节&lt;/th&gt;

    &lt;th&gt;第二节&lt;/th&gt;

    &lt;th&gt;第三节&lt;/th&gt;

    &lt;th&gt;第四节&lt;/th&gt;

    &lt;th&gt;加时1&lt;/th&gt;

    &lt;th&gt;加时2&lt;/th&gt;

    &lt;th&gt;总分&lt;/th&gt;

&lt;/tr&gt;

迭代th_names_json对象，即可实现，较完整代码：

var listSize = 2;

  function init(){

   var table_basic_html = '&lt;table ;100%" border="0" align="center" cellpadding="0" cellspacing="1" class="lTb05"&gt;';

   var th_names_json = {"选手":"name","第一节":"section_1","第二节":"section_2","第三节":"section_3","第四节":"section_4","加时1":"overtime_1","加时2":"overtime_2","总分":"totalScore"}

   var th_names_len = getJsonLength(th_names_json);

   var item_i = 0;

   for(var item in th_names_json){

    if(item_i==0){

     table_basic_html+="&lt;tr&gt;";

     }

     table_basic_html+="&lt;th&gt;"+item+"&lt;/th&gt;";

     if(item_i==th_names_len-1){

     table_basic_html+="&lt;/tr&gt;";

    item_i++;

   }

   for(var i=0;i&lt;listSize;i++){

    id = i+1;

    table_basic_html+='&amp;lt;tr id="tr_'+id+'"&gt;';

     var item_ini= 0;

       for(var item in th_names_json){      

       if(item_ini==0){

        table_basic_html+='&lt;td class="tl" id="t_'+id+'_'+th_names_json[item]+'"&gt;立陶宛男子篮球'+id+'&lt;/td&gt;';

       }else{

        table_basic_html+='&lt;td&gt;&lt;input id="t_'+id+'_'+th_names_json[item]+'" name="t_'+id+'_'+th_names_json[item]+'" type="text" class="mInput04" value="" size="8" /&gt;&lt;/td&gt;';

      }

       if(item_ini==th_names_len-1){

       table_basic_html+='&lt;/tr&gt;';

       }

       item_ini++;

   table_basic_html+="&lt;/table&gt;";

   alert(table_basic_html);

   document.write(table_basic_html);

      }

    function getJsonLength(data){   

     var objarray = new Array(); // 用来存储变量名称的数组

     for(var i in data){

      objarray[objarray.length++] = i;

        }

        return objarray.length;

   init();

再定义一个json对象： json =

{"t_1_name":"美国男子篮球队",

"t_1_section_1":"100","t_1_section_2":"60","t_1_section_3":"30","t_1_section_4":"10","t_1_totalScore":"190","t_2_name":"立陶宛男子篮球队","t_2_section_1":"10","t_2_section_2":"6","t_2_section_3":"3","t_2_section_4":"1","t_2_totalScore":"20"};

效果如图：

<a href="http://jooben.blog.51cto.com/attachment/201005/19/253727_1274230769Pn8t.png"></a>

这个时候，table还没有注入，“确定”之后：

<a href="http://jooben.blog.51cto.com/attachment/201005/19/253727_1274230770xHoc.png"></a>

ok，版本V3算是搞定，代码还可以优化的！

本文转自jooben 51CTO博客，原文链接:http://blog.51cto.com/jooben/317692