jquery json 生成动态表格


没有学过Jquery  求帮忙实现 能根据后台数据自动生成表格并能添加删除  谢谢

解决方案 »

  1.   


    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>form</title>
        <script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    </head>
    <body>
        SSID : <input type="text" id="ssid">
        加密方式 ：<select name="" id="type">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select><br><br>
        <button type="button" role='add'>add</button>
        <button type="button" role='del'>del</button>
        <button type="button" role='cancel'>cancel</button><br><br>
        <table id="a" border="1">
            <thead>
              <tr>
                  <th><input type="checkbox" name='ckAll' id='ckAll'></th>
                  <th>序号</th>
                  <th>SSID</th>
                  <th>加密方式</th>
              </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
        <script>
            var ids = {};
            $('button').on('click', function(){
                var type = $(this).attr('role'),
                    ssid = $('#ssid').val(),
                    t = $('#type').val();
                switch(type){
                    case 'add':
                        if(ssid !== ''){
                         //提交数据到后台响应成功重新生成表格
                            console.log('ssid : '+ssid + ' type : '+t)
                        }else{
                            console.log('ssid is null')
                        }
                    break;
                    case 'del':
                        var ssids = [];
                        for(var p in ids){
                            ssids.push(p);
                        }
                        if(ssids.length > 0){
                            //执行删除
                            console.log('del ssids :'+ssids)
                        }else{
                            console.log('ssids is null')
                        }
                    break;
                    case 'cancel':
                        $("#ssid,#type").val('');
                        $("#type").val('1');
                        //重置
                    break;
                }
            })
            //全选反选
            $('#ckAll').on('click', function(){
                var val = this.checked,
                key = $(this).attr("ssid");
                if(val){
                    $("input[name='ckAll']").each(function(){
                        if($(this).attr('ssid')){
                            $(this).prop("checked", true);
                            ids[$(this).attr('ssid')] = 1;
                        }
                    });
                }else{
                    $("input[name='ckAll']").each(function(){
                        $(this).prop("checked", false);
                    });
                    ids = {};
                }
            });        //获取选中的行
            function getSelection(){
                $("input[type='checkbox']:checked").each(function(){
                    if($(this).attr('ssid')){
                     ids[$(this).attr('ssid')] = 1;
                    }
                });
                //提交要删除的行id
            }        function init(){
                //从后台获取数据
                var data = [{id:'01', ssid:'adda',type:'open'},{id:'02', ssid:'addad',type:'open'}], trs = [];
                data.forEach(function(item){
                    trs.push('<tr><td><input type="checkbox" name="ckAll" ssid="'+item.id+'"></td><td>'+item.id+'</td><td>'+item.ssid+'</td><td>'+item.type+'</td></tr>');
                });
                $('tbody').html(trs.join(''));
            }        init();//初始化
        </script>
    </body>
    </html> 自己在请求的地方加上ajax就ok了
      

  2.   

    不会就学，基础都没有给你了也看不懂Web开发学习资料推荐
    jquery全年日期选择器日历插件
    jQuery仿excel表格单元格合并插件