用jQuery自己写的一个表格——jQuery菜鸟入门，希望和大家一起学习

最新推荐文章于 2021-07-23 11:10:36 发布

sunlu198906

最新推荐文章于 2021-07-23 11:10:36 发布

阅读量387

点赞数

文章标签： jquery table html ViewUI

[quote]一个简单的表格，可以根据输入的行列值来动态绘制表格，表格中的阿拉伯数字是我设定的一个t自增得到的，也可以自己修改代码，得到自己想要显示的内容。本人是刚入门的菜鸟级，正在学习jQuery，希望和大家多多交流，共同学习，共同进步。^_^[/quote]


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My table</title>
<style type="text/css">
  table tr{
          height:20px;
          background-color: red;
        	 }

  table tr td{
        	 width:50px;
        	 border-color: black;
        	 }
</style>

<script type="text/javascript" src="jquery-1.8.1.js"></script>
<script type="text/javascript">
  $(function(){
          $("#line").keydown(function(event){

                  if(event.keyCode==13){
        		$('#result').empty();
        		var line=$("#line").val();
        		var column=$("#column").val();
	        	$('#result').append(apTable(line, column));
        		}
        	 })

          function apTable(l, c){
                var arr = [];
                var t=1;
        	       arr.pus('<table border="1px" bordercolor="black">');

        		for(var i=0; i<l; i++){
        		      arr.push('<tr>');

                        for(var j=0; j<c; j++){		
        		      arr.push('<td>');
        		      arr.push(t);
        		      arr.push('</td>');
        		      t++;
        		      }
        		      arr.push('</tr>');
        		      }

        		      arr.push('</table>');
        		      return arr.join('');
        		}

          $("#column").keydown(function(event){	
        		if(event.keyCode==13){
        	         $("#result").empty();
        		var line=$("#line").val();
        		var column=$("#column").val();
        		$("#result").append(apTable(line,column));
        		}

        		})

        		})	


</script>
</head>

<body>
       <input class="text" id="line" />行
        <input class="text" id="column"/>列
        <div id="result"></div>
</html>