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').cells
alert(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').rows
x[0].align="right"
}


function valignRow()
{
var x=document.getElementById('myTable').rows
x[0].vAlign="top"
}


function alignCell()
{
var x=document.getElementById('myTable').rows[0].cells
x[0].align="center"
}



function valignCell()
{
var x=document.getElementById('myTable').rows[0].cells
x[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].cells
x[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>

posted @ 2006-07-14 18:22  烈马狂生  阅读(484)  评论(0)  编辑  收藏  举报