JavaScript DHTML/Table/Column

Материал из Web эксперт
Версия от 07:28, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

"axis" Example: Group Column

    
<html>
<body>
<table border="1" summary="time report">
    <caption>table caption</caption>
    <tr>
      <th>&nbsp;</th>
      <th id="head1" axis="hours">cell 1</th>
      <th id="head2" axis="hours">cell 2</th>
    </tr>
    <tr>
      <th id="a6" axis="name">name</th>
      <th>&nbsp;</th>
      <th>&nbsp;</th>
      <th>&nbsp;</th>
    </tr>
    <tr>
      <td id="a7" axis="date">2004</td>
      <td headers="head1 head2">7</td>
      <td headers="head1 head2">2</td>
      <td>&nbsp;</td>
    </tr>
    <td id="a7" axis="date">2004</td>
      <td headers="head1 head2">9</td>
      <td headers="head1 head2">1</td>
      <td>&nbsp;</td>
    </tr>
    <td id="a7" axis="date">2004</td>
      <td headers="head1 head2">7</td>
      <td headers="head1 head2">1</td>
      <td>&nbsp;</td>
    </tr>
</table>
<button onclick="alert(head1.axis);">Get the axis for heading 1</button>
</body>
</html>



Column span Example

    
<html>
<body>
<table border="3" cellspacing="5" cellpadding="5">
  <colgroup>
    <col id="col_1">
    <col id="col_2">
    <col id="col_3">
    <tr>
        <td>Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
        <td>Column 4</td>
        <td>Column 5</td>
        <td>Column 6</td>
   </tr>
   <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
        <td>Cell 5</td>
        <td>Cell 6</td>
   </tr>
</table>
<input type="button" value="Span" onClick="function1();">
<script language="JavaScript">
    document.getElementById("col_1").span = 2;
    document.getElementById("col_2").span = 3;
    document.getElementById("col_3").span = 1;
    function function1() {
        document.getElementById("col_2").align = "center"
        document.getElementById("col_2").style.color = "green"; 
    } 
</script>