HTML5+CSS3+JS学习笔记-8-使用JS及函数来制作表格

最新推荐文章于 2023-08-11 22:40:22 发布

PandaCode辉

最新推荐文章于 2023-08-11 22:40:22 发布

阅读量1.2k

点赞数

分类专栏： Html5 文章标签： html5 javascript

本文链接：https://blog.csdn.net/xionghui2007/article/details/53862673

版权

Html5 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

今天学习了一些javascript知识，不写一个页面标签，利用函数制作表格

截图：

代码：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>使用JS函数来制作表格练习</title>
<script src="jquery-1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e){
//1、向body页面内添加一个div，id命名为world
$("body").append('<div id="world"></div>');
//2、在div内追加1个table，边框为1px，填充间距都是0
$("#world").append('<table border="1" cellspacing="0" cellpadding="0"></table>');
//3、给world设置样式，宽度高度，绝对定位页面水平垂直居中
$("#world").css({
"padding":"0px",
"height":"500px",
"width":"500px",
"position":"absolute",
"left":"50%",
"top":"50%",
"transform":"translate(-50%,-50%)",
"background-color":"#000"
});
//4、给table设置样式，相当world水平垂直居中
$("table").css({
"position":"relative",
"left":"50%",
"top":"50%",
"transform":"translate(-50%,-50%)"
});
//5、设定循环变量 i，格子数变量 num，并设定初始化值
var i=0;
var num=10;
//6、在table内循环添加tr行标签，循环数量为 num
for (i=0;i<num;i++){
$("table").append(function(i){
return "<tr></tr>";
});
}
//7、在添加完tr行后，继续往里面添加td列标签，循环数量为 num
for (i=0;i<num;i++){
$("tr").append(function(i){
return "<td>"+i+"</td>";
});
}
//8、添加完表格数量后，给表格td设定css样式，高度和宽度,字体颜色居中
$("td").css({
"height":"40px",
"width":"40px",
"color":"#FFF000",
"text-align":"center"
});
});
</script>
</head>

<body>
</body>
</html>