JS动态创建表格

来源：互联网发布：linux 视频剪辑软件编辑：程序博客网时间：2024/05/16 04:47
<html><head><title>JS动态创建表格</title><script>//表格1添加行function addR1() {var tab1=document.getElementById("table1");//获取表格对象var r   =tab1.insertRow();//insertRow():添加一个表格行，返回新添加的行对象r.height="30px";//设置行高var len =tab1.rows.length;//rows:表格对象中，行的集合alert("添加后的行数："+len);}//删除行function delR1() {var tab1=document.getElementById("table1");//获取表格对象var len =tab1.rows.length-1;//rows:表格对象中，行的集合tab1.deleteRow(len);//deleteRow(index)从指定索引开始删除表格行alert("删除后的行数："+len+1);}</script><script>//表格2添加行function addR2() {var tab2=document.getElementById("table2");var r  =tab2.insertRow(0);//insertRow():添加一个表格行，返回新添加的行对象r.height="30px";//行对象设置高度r.bgColor="red";//行对象设置背景颜色for(var i=0;i<5;i++) {var c=r.insertCell();//添加一个单元格，并返回这个单元格对象那个c.innerText="单元格"+i;//单元格中设置普通文本}var len=tab2.rows.length;alert("添加后的行数："+len);}//删除行function delR2() {var tab2=document.getElementById("table2");var len =tab2.rows.length-1;tab2.deleteRow(len);alert("删除后的行数："+len);}//设置表格属性function setT() {var tab2=document.getElementById("table2");tab2.width="400px";//设置表格宽度tab2.bgColor="gray";//设置表格背景颜色tab2.cellSpacing="3px";//设置单元格间距tab2.border="2px";//设置边框}</script></head><body><table border="1px" id="table1"><script>for(var i=0;i<3;i++) {document.write("<tr>");for(var j=0;j<3;j++) {document.write("<td>");document.write("单元格"+(i+j));document.write("</td>");}document.write("</tr>");}</script></table><input type="button" value="添加行" onclick="addR1();"><input type="button" value="删除行" onclick="delR1();"><table id="table2"><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr><tr><td>11</td><td>1</td><td>31</td><td>41</td></tr></table><input type="button" value="添加行" onclick="addR2();"><input type="button" value="删除行" onclick="delR2();"><input type="button" value="设置行" onclick="setT();"></body></html>
0 0