前端开发自动生成表格的插件及单选功能的开发

前端开发自动生成表格的插件及单选功能的开发

一、具备功能

1）通过利用json和jquery自动生成表格
2）单选框功能
3）flex布局

二、实现过程及思路

1）搭建html骨架
2）借助css添加样式
3）借助javascript添加功能，形成表格
参考代码下载地址

function showtable(data){
    var html = '';
    $.each(data,function (i,n) {
        if(n.children == 0){
            var th0 = '';
            var a1 = n.atrr;
            $.each(a1,function (k,j) {
                var a2 = j.atrr;
                if(j.children == 1){
                    th0 += '<li><span>' + j.text + '</span></li><li class="inp"><input type="radio"  name="'+j.id+'"/>有<input type="radio" name="'+j.id+'"/>无</li>';
                }else{
                    var th1='';
                    $.each(a2,function(m,q){
                        if(q.children == 1){
                            th1 += '<li><span>' + q.text + '</span></li><li class="inp"><input type="radio"  name="'+q.id+'"/>有<input type="radio" name="'+q.id+'"/>无</li>';
                        }
                    });
                    th0 +='<ul class="table-sub"><li><span>'+j.text+'</span></li><ul>'+th1+'</ul></ul>';
                }
            });

        }
        html += '<ul class="table-style"><li><span>'+n.text+'</span></li><ul>'+th0+'</ul></ul>';
    });
    $('.text-table').html(html);
}