caption 返回表格的标题对象
rows 返回该表格里的所有表格行(数组)
通过rows[index]返回表格指定的行所对应的属性:
cells 返回该表格行内所有的单元格组成的数组
通过cells[index]返回表格指定的列所对应的属性:
cellIndex 返回该单元格在表格行内的索引值
<!doctype html> <html> <head> <meta charset="utf-8"> <title>对表格元素进行增删改操作</title> <script type="text/javascript" src="dom8.js"></script> </head> <body id="test"> <input type="button" value="创建一个5行4列的表格" onClick="create()"> <input type="button" value="删除最后一行" onClick="delrow()"> <input type="button" value="删除最后一个单元格" onClick="delCell()"> </body> </html>
// JavaScript Document //创建五行四列的表格 var table; var body; function create(){ //创建table元素节点 table=document.createElement("table"); //设置属性 table.border="1px"; //获取body元素节点 body=document.getElementsByTagName("body")[0]; //将table标签添加至body body.appendChild(table); //循环插入五行 for(var i=0;i<5;i++){ var tr=table.insertRow(i); //插入四列 for(var j=0;j<4;j++){ var td=tr.insertCell(j); //添加文本节点 td.innerHTML="第"+(i+1)+"行","第"+(j+1)+"列" } } } //删除一行表格 function delrow(){ //判断table中是否还有tr if(table.rows.length>0){ //获取最后一行tr的下标 var index=table.rows.length-1; //删除最后一行 table.deleteRow(index); }else{ //所有行都被删除,最后删除table标签 body.removeChild(table); } } //一列一列删除 function delCell(){ //判断最后一行中是否还有有td if(table.rows[table.rows.length-1].cells.length>0){ //获取最后一行tr下标 var index=table.rows.length-1; //获取最后一行的最后一列的下标 var index2=table.rows[index].cells.length-1; //删除最后一列 table.rows[index].deleteCell(index2); }else{ //删除最后一行 table.deleteRow(table.rows.length-1); } }
原文:https://www.cnblogs.com/soda001/p/13557700.html