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

来源：互联网发布：印尼旅行社软件编辑：程序博客网时间：2024/06/04 19:37

<%@ 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.onload=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.onload= 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