首页 > Web开发 > 详细

JQuery操作TABLE,及console.info问题。

时间:2014-08-07 18:47:00      阅读:1037      评论:0      收藏:0      [点我收藏+]

还用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;
    width: 300px;
}
 
table td {
    border: 1px solid black;
    width: 50%;
}
 
table th {
    border: 1px solid black;
    width: 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>
?

JQuery操作TABLE,及console.info问题。,布布扣,bubuko.com

JQuery操作TABLE,及console.info问题。

原文:http://www.cnblogs.com/xkzy/p/3897732.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!