博客

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

  • Post author:
  • Post category:其他


<%@ 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>