Dom-Table object

< html > < head > < script  type ="text/javascript" > function  changeBorder(){document.getElementById('myTable').border = " 10 " } function  padding(){document.getElementById('myTable').cellPadding = " 15 " } function  spacing(){document.getElementById('myTable').cellSpacing = " 15 " } function  aboveFrames(){document.getElementById('myTable').frame = " above " } function  belowFrames(){document.getElementById('myTable').frame = " below " } function  rowRules(){document.getElementById('myTable').rules = " rows " } function  colRules(){document.getElementById('myTable').rules = " cols " } function  specifyRow(){alert(document.getElementById('myTable').rows[ 0 ].innerHTML)} function  cell(){ var  x = document.getElementById('myTable').cellsalert(x[ 0 ].innerHTML);x[ 0 ].style.display  =   " none "  ;} function  deleteRow(i){document.getElementById('myTable1').deleteRow(i)} function  createCaption(){ var  x = document.getElementById('myTable').createCaption()x.innerHTML = " <b>My table caption</b> " } function  insRow(){ var  x = document.getElementById('myTable').insertRow( 0 ) var  y = x.insertCell( 0 ) var  z = x.insertCell( 1 )y.innerHTML = " NEW CELL1 " z.innerHTML = " NEW CELL2 " } function  addCell(){ var  x = document.getElementById('myTable').rows[ 0 ] var  y = x.insertCell( 2 )y.innerHTML = " NEW CELL " } function  alignRow(){ var  x = document.getElementById('myTable').rowsx[ 0 ].align = " right " } function  valignRow(){ var  x = document.getElementById('myTable').rowsx[ 0 ].vAlign = " top " } function  alignCell(){ var  x = document.getElementById('myTable').rows[ 0 ].cellsx[ 0 ].align = " center " } function  valignCell(){ var  x = document.getElementById('myTable').rows[ 0 ].cellsx[ 0 ].vAlign = " bottom " } function  changeContent(){ var  x = document.getElementById('myTable').rows[ 0 ].cells;x[ 0 ].innerHTML = " NEW CONTENT " ; // alert("sdfsdssf"); x[ 0 ].style.display  =   " none "  ;} function  setColSpan(){ var  x = document.getElementById('myTable2').rows[ 0 ].cellsx[ 0 ].colSpan = " 2 " x[ 1 ].colSpan = " 6 " } </ script > </ head > < body > < table  id ="myTable"  border ="1" > < tr > < td > Row1 cell1 </ td > < td > Row1 cell2 </ td > </ tr > < tr > < td > Row2 cell1 </ td > < td > Row2 cell2 </ td > </ tr > </ table > < table  id ="myTable1"  border ="1" > < tr >    < td > Row 1 </ td >    < td >< input  type ="button"  value ="Delete"  onclick ="deleteRow(this.parentNode.parentNode.rowIndex)" ></ td > </ tr > < tr >    < td > Row 2 </ td >    < td >< input  type ="button"  value ="Delete"  onclick ="deleteRow(this.parentNode.parentNode.rowIndex)" ></ td > </ tr > < tr >    < td > Row 3 </ td >    < td >< input  type ="button"  value ="Delete"  onclick ="deleteRow(this.parentNode.parentNode.rowIndex)" ></ td > </ tr > </ table > < table  id ="myTable2"  border ="1" > < tr > < td  colspan ="4" > cell 1 </ td > < td  colspan ="4" > cell 2 </ td > </ tr > < tr > < td > cell 3 </ td > < td > cell 4 </ td > < td > cell 5 </ td > < td > cell 6 </ td > < td > cell 7 </ td > < td > cell 8 </ td > < td > cell 9 </ td > < td > cell 10 </ td > </ tr > </ table > < br > --------------------------------------------------------------------------------- < br > < form > < input  type ="button"  onclick ="changeBorder()"  value ="Change Border" > < br > --------------------------------------------------------------------------------- < br > < input  type ="button"  onclick ="padding()"  value ="Change Cellpadding" > < input  type ="button"  onclick ="spacing()"  value ="Change Cellspacing" > < br > --------------------------------------------------------------------------------- < br > < input  type ="button"  onclick ="aboveFrames()"  value ="Show above frames" > < input  type ="button"  onclick ="belowFrames()"  value ="Show below frames" > < br > --------------------------------------------------------------------------------- < br > < input  type ="button"  onclick ="rowRules()"  value ="Show only row borders" > < input  type ="button"  onclick ="colRules()"  value ="Show only col borders" > < br > --------------------------------------------------------------------------------- < br > < input  type ="button"  onclick ="specifyRow()"  value ="Show innerHTML of first row" > < br > --------------------------------------------------------------------------------- < br > < input  type ="button"  onclick ="cell()"  value ="Alert first cell" > < br > --------------------------------------------------------------------------------- < br > < input  type ="button"  onclick ="createCaption()"  value ="Create caption" > < br > --------------------------------------------------------------------------------- < br > < input  type ="button"  onclick ="insRow()"  value ="Insert row" > < br > --------------------------------------------------------------------------------- < br > < input  type ="button"  onclick ="addCell()"  value ="Add cell" > < br > --------------------------------------------------------------------------------- < br > < input  type ="button"  onclick ="alignRow()"  value ="Align first row" > < br > --------------------------------------------------------------------------------- < br > < input  type ="button"  onclick ="valignRow()"  value ="Vertical align row" > < br > --------------------------------------------------------------------------------- < br > < input  type ="button"  onclick ="alignCell()"  value ="Align cell content" > < br > --------------------------------------------------------------------------------- < br > < input  type ="button"  onclick ="valignCell()"  value ="Vertical align cell content" > < br > --------------------------------------------------------------------------------- < br > < input  type ="button"  onclick ="changeContent()"  value ="Change content" > < br > --------------------------------------------------------------------------------- < br > < input  type ="button"  onclick ="setColSpan()"  value ="Change colspan" > </ form > </ body > </ html >

转载于:https://www.cnblogs.com/Elong/archive/2006/07/14/450966.html