使用JS创建表格和得到/修改样式

最新推荐文章于 2024-05-03 16:01:29 发布

神奇的种子

最新推荐文章于 2024-05-03 16:01:29 发布

阅读量1.1k

点赞数

分类专栏： JS

JS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript">
window.οnlοad=function() {  
    var table=document.createElement("table");  
    document.body.appendChild(table);  
    //给表格添加属性  
    table.width=300;  
    table.border=1;  
    //创建表格的标题  
    var caption=document.createElement("caption");  
    table.appendChild(caption);  
    //给表格的标题添加内容  
    caption.innerHTML="人员表";//非W3c标准的方法  
    //创建表格的第一行，是个标题行  
    var thead=document.createElement("thead");  
    table.appendChild(thead);  
    var tr1=document.createElement("tr");  
    thead.appendChild(tr1);  
    //创建列  
    var th1=document.createElement("th");  
    tr1.appendChild(th1);  
    th1.innerHTML="姓名";  
    var th2=document.createElement("th");  
    tr1.appendChild(th2);  
    th2.innerHTML="性别";  
    var th3=document.createElement("th");  
    tr1.appendChild(th3);  
    th3.innerHTML="年龄";  
    //创建表格的第二行，是个内容行  
    var tbody=document.createElement("tbody");  
    table.appendChild(tbody);  
    var tr2=document.createElement("tr");  
    tbody.appendChild(tr2);  
    //创建列  
    var td1=document.createElement("td");  
    tr2.appendChild(td1);  
    td1.innerHTML="张三";  
    var td2=document.createElement("td");  
    tr2.appendChild(td2);  
    td2.innerHTML="男";  
    var td3=document.createElement("td");  
    tr2.appendChild(td3);  
    td3.innerHTML="20";  
    //创建表格的第三行，是个内容行  
    var tr3=document.createElement("tr");  
    tbody.appendChild(tr3);  
    //创建列  
    var td4=document.createElement("td");  
    tr3.appendChild(td4);  
    td4.innerHTML="张三";  
    var td5=document.createElement("td");  
    tr3.appendChild(td5);  
    td5.innerHTML="男";  
    var td6=document.createElement("td");  
    tr3.appendChild(td6);  
    td6.innerHTML="20";  
};
</script>
</head>
<body>

</body>
</html>

样式问题

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript">
	window.οnlοad= function (){
		//获取行内式样式所在元素节点  
		var box=document.getElementById("box");  
		alert(box.style);//返回：object CSSStyleDeclaration表示样式对象  
		alert(box.style.color);//返回：rdb(255,255,255)表示白色，不同的浏览器会有不同的结果  
		alert(box.style.backgroundColor);//返回：rdb(0,255,0)表示绿色，不同的浏览器会有不同的结果  
		/* 修改样式 */
		box.style.backgroundColor="#FF0000";
		alert(box.style.cssFloat||box.style.styleFloat);//返回：right	
		
	}


</script>
</head>
<body>
<div id="box" style="background-color:#00FF00; color:#FFFFFF; font-size:24px; float:right;">
		div区域
</div> 
</body>
</html>

神奇的种子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用JS创建表格和得到/修改样式

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>Insert title herewindow.onload=function() { var table=document.createElement("table"); docu
复制链接

扫一扫