Table - Foot - JavaScript DHTML

Started by VelMurugan, Apr 08, 2009, 12:20 PM

Previous topic - Next topic
Go Down Pages1

VelMurugan

Apr 08, 2009, 12:20 PM
'tFoot' Example

Code Select
<html>
<body>
<script language="JavaScript">
function function1() {
   document.all.myTable.tHead.style.backgroundColor = "blue";
}

function function2() {
    document.all.myTable.tFoot.style.backgroundColor = "red";
}
</script>
<table id="myTable" border="1" width="500">
   <thead>
      <tr>
          <td>tHead, Cell 1</td>
      </tr>
   </thead>
   <tbody>
       <tr>
           <td>tBody, Cell 2</td>
       </tr>
       <tr>
           <td>tBody, Cell 3</td>
       </tr>
       <tr>
           <td>tBody, Cell 4</td>
       </tr>
   </tbody>
   <tfoot>
       <tr>
           <td>tFoot, Cell 5</td>
       </tr>
   </tfoot>
</table>
<button onclick="function1();">Turn Head Blue</button>
<button onclick="function2();">Turn Foot Red</button>
</body>
</html>

Source : java2s

VelMurugan

#1
Apr 08, 2009, 12:20 PM
Create Table Foot

Code Select
<html>
<body>
<script language="JavaScript">
function function1() {
   var m = document.all.myT.createTFoot();
   m.bgColor = 'red';
}
function function2() {
   var n = document.all.myT.createTHead();
   n.bgColor = 'yellow';
}
</script>
<table id="myT">
    <thead id="th">
        <tr>
            <th>Cell 1</th>
            <th>Cell 2</th>
        </tr>
    <tfoot id="tf">
        <tr><td>Cell 3</td>
            <td>Cell 4</td>
        </tr>
</table>
<input type="button" value="Create tfoot" onclick="function1();">
<input type="button" value="Create thead" onclick="function2();">
</body>
</html>

VelMurugan

#2
Apr 08, 2009, 12:21 PM
Delete Table Foot

Code Select
<html>
<body>
<script language="JavaScript">
function function1() {
    document.all.myTable.deleteTFoot();
}
</script>
<table id="myTable" width="25%" border="1">
    <tr>
        <td>Row 1</td>
        <td>Cell 1</td>
    </tr>
    <tr>
        <td>Row 2</td>
        <td>Cell 2</td>
    </tr>
    <tr>
        <td>Row 3</td>
        <td>Cell 3</td>
    </tr>
    <tfoot>
        <tr>
           <td>TFOOT</td>
           <td>Cell 4</td>
        </tr>
    </tfoot>
</table>
<input type="button" value="Remove TFOOT" onclick="function1();">
</body>
</html>
Go Up Pages1