zoukankan      html  css  js  c++  java
  • JQuery操作TABLE,及console.info问题。

    还用alert 吗?看看console.info吧,代码的测试平台:ie9, firefox12 
    ​1. [代码][JavaScript]代码
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <style type="text/css">
    table {
        border: 1px solid black;
        border-collapse: collapse;
        300px;
    }
     
    table td {
        border: 1px solid black;
        50%;
    }
     
    table th {
        border: 1px solid black;
        50%;
    }
     
    tbody th {
        background-color: #06C;
    }
    </style>
    </head>
    <body>
        <div>
            <p id='para'>
                <a id="delTbody" href="javascript:;">del tbody</a>
                <a id='delRow' href="javascript:;">del row</a>
                <a id='tbodyEmpty' href="javascript:;">tbody empty</a>
            </p>
        </div>
        <table id='tab'>
            <thead>
                <tr>
                    <th>name</th>
                    <th>sex</th>
                </tr>
            </thead>
        </table>
        <script type="text/javascript" src="../../jslib/jquery-1.7.1.js"></script>
        <script type="text/javascript">
          (function(w){
              // ie8 or ie9 console problem solution.     
              if(! w.console){
                    //alert(".....");
                    w.console = {
                        info : function(){},
                        error : function(){},
                        log : function(){}
                    };
              }
          })(window);
     
         
            var tab = $('#tab');
             
            var jsonArr = [{'name' : 'zhai', 'sex' : 'F'},
                        {'name' : 'lsie', 'sex' : 'M'},
                        {'name' : 'abcd', 'sex' : 'M'},
                        {'name' : 'jia1', 'sex' : 'F'}
                        ];
     
            (function(){
                console.info('OK');
                var body = $("<tbody></tbody>");
     
                for(var i = 0; i < jsonArr.length; i++){
                    var j = jsonArr[i];
                    var td1 = $('<td>' + j.name + '</td>');
                    var td2 = $('<td>' + j.sex + '</td>');
                    http://www.huiyi8.com/banbao/huabian/
                    var tr = $('<tr></tr>');
                    tr.append(td1);
                    tr.append(td2);
                    body.append(tr);
                }
     
                console.info(body.toString());
                tab.append(body);
            })();
     
              $(document).ready(function () {
                    $('#para').click(function(event){
                        //console.info("para ......" + event);
     
                        var id = event.target.id;
                        switch(id){
                        case 'delTbody' :
                            console.info('del t');
                            $("#tab tbody").remove();
                            break;
                        case 'delRow' :
                            console.info('del r');
                            try{板报设计
                                tab[0].tBodies[0].deleteRow(0);
                                //tab[0].deleteRow(1);
                            }catch(e){
                                console.error('rows length is zero.' + e);
                            }
                            break;
                        case 'tbodyEmpty' :
                            $('#tab tbody').empty();
                            break;
                        }
                    });
     
                  /*
                    $('#delRow').click(function(){
                        console.info('del r');
                        $('table tbody').empty();
                    });
                  */
              });
               
        </script>
    </body>
    </html>

  • 相关阅读:
    ref和out的区别
    final、finally、finalize的区别
    get和post的区别
    什么是事务
    锁的详细
    什么是游标
    什么是存储过程
    委托的来由
    多线程的秘密
    String str=null; 和String str=""的区别
  • 原文地址:https://www.cnblogs.com/xkzy/p/3897732.html
Copyright © 2011-2022 走看看