zoukankan      html  css  js  c++  java
  • 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>
    创建table及子标签

    代码:

    <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>
    创建多选框
  • 相关阅读:
    问题:android学习内容破碎,我个人关于如何学习android的一些个人经历
    问题:一球从某高度自由落下,每次落地后反跳回原高度的一半;再落下,求它在第n次落地时,共经过多少米?第n次反弹多高?
    问题:alias设置与删除
    问题:从键盘读取特定类型的数据(使用Scanner读取int类型)
    求一个数组当中最大(最小)值的两种计算方法
    Mysql5.7安装
    maven下载及安装
    Ubuntu下修改DNS重启也能用的方法
    删除CNNIC证书
    字符编码ASCII, Unicode和UTF-8概念扫盲
  • 原文地址:https://www.cnblogs.com/renfanzi/p/8658976.html
Copyright © 2011-2022 走看看