js dom 创建table标签和子属性， 以及创建多选框

代码：

   <div class="Category">
        <span id="Edit_headerTitle">Edit Categories</span>
        <table>
            <tbody></tbody>
        </table>
    </div>
    <div>
        <!--Add New Category-->
        <span id="Add_headerTitle" style="">Add New Category</span>
        <hr/>
        <h3>
            Title
        </h3>
        <input type="text" size="40" style="height: 30px; font-size: 18px">
        <h3>
            Description(30 characters including HTML)
        </h3>
        <textarea rows="10" cols="54" style="display: block; margin-bottom: 20px;"></textarea>
        <input type="button" value="ADD">
    </div>
    <script type="text/javascript" src="/static/admin/js/jquery-1.10.2.js"></script>
    <script type="text/javascript">

    // 1. 先获取浏览器的宽度
    // 2. 获取左边的宽度
    // 3. 相减

    window.onload=function (){

        <!--var total_length = window.innerWidth;-->
        <!--console.log(total_length);-->
        <!--var left_length = document.getElementsByClassName("nav")[0].offsetHeight;-->
        <!--var right_length = total_length - left_length;-->

        var form = {};

        <!--document.getElementsByClassName("right_side")[0].style.width = right_length + 'px';-->



        // 写ajax 获取 category ， 然后生成table
        $.ajax({
                url: "/showcategory",
                type: 'post',
                data: form,
                success: function(arg){
                    var my_data = JSON.parse(arg);
                    if (my_data["statuscode"]==2000){
                        var category_info = my_data["value"];


                       // 1. 先生成表头
                       // 2. 在生成table body
                        <!--var title = [];-->
                       var title = ["ID", "Title", "TitleStatus", "CreateTime"];
                       var table = document.getElementsByTagName('table')[0];

                       if(category_info.length != 0){
                            <!--for (var i in category_info[0]){-->
                                   <!--title.push(i);-->

                            <!--}-->


                            for (var c = 0; c < title.length; c++){
                                var th = document.createElement('th');
                                table.getElementsByTagName('tbody')[0].appendChild(th);
                                table.getElementsByTagName('tbody')[0].getElementsByTagName('th')[c].innerHTML = title[c];

                            }


                            for (var b = 0; b < category_info.length; b++){
                                 var tr = document.createElement('tr');

                                 for (var i in title){
                                    var td = document.createElement("td");
                                    if (title[i] == 'TitleStatus' && category_info[b][title[i]] == 1){
                                        td.innerHTML = "True";
                                    } else{
                                        td.innerHTML = "" + category_info[b][title[i]];
                                    }

                                    tr.appendChild(td);
                                 }

                                 table.appendChild(tr);



                            }



                       }


                    }

                }
            })


    }



    // 1. 去model获取类型， 然后生成表格





    </script>

 

代码：

<div class="category">
    </div>
     <script type="text/javascript" src="/static/admin/js/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        window.onload = function(){
        // 1. 生成Category 的多选框标签， 可多选
        var form = {};

        $.ajax({
                url: "/showcategory",
                type: 'post',
                data: form,
                success: function(arg){
                    var my_data = JSON.parse(arg);
                    if (my_data["statuscode"]==2000){

                        //  标签信息【{}， {}】
                        var category_info = my_data["value"];

                        outside_class = document.getElementsByClassName("category");
                        console.log(outside_class);
                        console.log(outside_class[0]);

                        // <p><input type="checkbox" name="vehicle" value="Bike" /> I have a bike</p>

                        for (var i=0; i < category_info.length; i++){
                            var p_label = document.createElement("p");


                            var multiple_input = document.createElement("input");
                            p_label.innerHTML = "" + category_info[i]["Title"];
                            p_label.appendChild(multiple_input);

                            outside_class[0].appendChild(p_label);
                            document.getElementsByClassName("category")[0].getElementsByTagName("input")[i].setAttribute("type","checkbox");
                            document.getElementsByClassName("category")[0].getElementsByTagName("input")[i].setAttribute("value",category_info[i]["ID"]);


                        }

                      }
                    }
            })



        }

    </script>