jquery表格

maya520

于 2014-02-23 20:04:19 发布

阅读量157

点赞数

分类专栏： JavaScript 文章标签： Jqurey

本文链接：https://blog.csdn.net/maya520/article/details/84530128

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<title></title>
<style type="text/css">
table.stats {
    width: 480px;
    border-collapse:collapse;
    }
table.stats td {
               border: 1px #000 solid;
               }

</style>
<script>
    $(document).ready(function(){
        //<tr/>
        $("#tab tr").attr("align","center");

        //<tr/>
        $("#but").click(function(){
            var _len = $("#tab tr").length;        
            $("#tab").append("<tr id="+_len+" align='center'>"
                                +"<td>"+_len+"</td>"
                                +"<td>Dynamic TR"+_len+"</td>"
                                +"<td><input type='text' name='desc"+_len+"' id='desc"+_len+"' /></td>"
                                +"<td><a href=\'#\' onclick=\'deltr("+_len+")\'>删除</a></td><td></td>"
                            +"</tr>");  
                            t();          
        })    
    })

    //ɾ<tr/>
    var deltr =function(index)
    {
        var _len = $("#tab tr").length;
        $("tr[id='"+index+"']").remove();//ɾǰ
        for(var i=index+1,j=_len;i<j;i++)
        {
            var nextTxtVal = $("#desc"+i).val();
            $("tr[id=\'"+i+"\']")
                .replaceWith("<tr id="+(i-1)+" align='center'>"
                                +"<td>"+(i-1)+"</td>"
                                +"<td>Dynamic TR"+(i-1)+"</td>"
                                +"<td><input type='text' name='desc"+(i-1)+"' value='"+nextTxtVal+"' id='desc"+(i-1)+"'/></td>"
                                +"<td><a href=\'#\' onclick=\'deltr("+(i-1)+")\'>删除</a></td><td></td>"
                            +"</tr>");
        }    
        t();

        var arr = [1, 2, 3, 4, 5];
		var removeItem = 2;   

		arr = $.grep(arr, function(value) {
		  return value != removeItem;
		});

    }

    function t() {
    	var _len = $("#tab tr").length;
    	for (var i=1; i<_len; i++) {
    		$('#tab tr').eq(i).children().eq(4).text(i)
    	}
    }
</script>
</head>
<body>

    <table id="tab" border="1" width="60%" align="center" class="stats">
        <tr>
            <td width="20%"></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
       </tr>
    </table>
    <div style="border:2px; 
                border-color:#00CC00; 
                margin-left:20%;
                margin-top:20px">
        <input type="button" id="but" value=""/>
    </div>
</body>
</html>