jq制作table

最新推荐文章于 2024-07-31 15:52:50 发布

原创最新推荐文章于 2024-07-31 15:52:50 发布 · 649 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

24 篇文章

订阅专栏

<head>
    <style>
        #t2 td,#t2 input{ width: 50px;}
    </style>
</head>
<input type="submit" id="hang"  value="添加行" /><input type="submit" id="lie"  value="添加列" /><br>
<table id="t2" border="1" cellpadding="2" cellspacing="1"  style=" border:blue solid 1px; table-layout:fixed;">
    <tr id="tr_h">
        <td></td>
        <td>A</td>
    </tr>
    <tr>
        <td>1</td>
        <td><input type="text"></td>
    </tr>
</table>

<script type="text/javascript">
    $(document).ready(function () {
        $("#lie").bind("click",function(){
            var ns=1;
            function getChar(i){
                return (i+10).toString(36).toUpperCase();
            }
            var htd=$('#t2 tr').size()-1;
            $('#t2 tr').each(function(){
                if(ns==1){
                    var zm=$('#tr_h td:last').index();
                    $('#tr_h').append('<td>'+getChar(zm)+'</td>');
                    ns++;
                }else{
                    $(this).append('<td><input type="text"></td>');
                }
            });
        });
        $("#hang").bind("click",function(){
            var atd=$('#tr_h td').size();
            var num=$('#t2 tr:last td:first').text();
            $('#t2').append('<tr><td>'+(++num)+'</td></tr>');
            for(var i=1;i<atd;i++){
                $('#t2 tr:last').append('<td><input type="text"></td>');
            }
        });
    });
</script>