JAVASCRIPT - Base de datos dinámica

Base de datos dinámica

Compatibilidad: Ms Internet Explorer, Netscape
Efecto gráfico notable y tecnología avanzada de script para este ejemplo muy interesante aunque difícil de personalizar.

[ Muestra el ejemplo práctico ]

el código para insertar en tu página

<TITLE>Ejemplos Javascript: ejemplo práctico </TITLE>

</HEAD>

<div style="position:relative">
<script language="javascript">
    for (var j = 0; j < Titles.length; ++j)
    {
        name = Titles[j];
        document.writeln(
        "<div style=\"position:absolute;top:5px;width:350px\">\n" +
        "    <table id=\"" + name + "\"" +
        " cellpadding=1 cellspacing=4 border=2" +
        " bgColor=" + bgColor+ "\n style=" +
        "\"display:none; position:absolute; left:200px\">");
        document.writeln(
            "<tr bgColor=" + bgColor+ ">");
        document.writeln(
            "  <th bgColor=" + fgColor + " align=center>" +
            " <font color=" + bgColor + ">Language</font>");
        document.writeln(
            "  <th bgColor=" + fgColor + " align=center>" +
            " <font color=" + bgColor + ">Years Used</font>");
        document.writeln
            ("  <th bgColor=" + fgColor + " align=center>" +
             " <font color=" + bgColor + ">Last Used</font>");
        for (var i = 0; i < Text[j].length; i = i + nCols)
        {
            if (Text[j][i + 3] == 0)
            {
                document.writeln(
                "  <tr><td>" + Text[j][i] + 
                "\n    <td align=\"center\">" + Text[j][i+1] + 
                "\n    <td>" + Text[j][i+2] + "\n  </tr>");
            }
            else
            {
                document.writeln(
                "  <tr><td><b>" + Text[j][i] + 
                "</b>\n    <td align=\"center\"><b>" + Text[j][i+1] + 
                "</b>\n    <td><b>" + Text[j][i+2] + "</b>\n  </tr>");
            }
        }
        document.writeln("</table>");
        document.writeln("</div>");
    }
</script>
</div>
  
<table border="0" cellspacing="4">
<script language="javascript">
  for (var i = 0; i < Titles.length; ++i)
  {
    document.writeln("<tr>\n<td><p align=\"right\"><a");
    document.writeln("onmouseover=\"eShow("" + Titles[i] + "")\"");
    document.writeln("onmouseout=\"eHide("" + Titles[i] + "")\"</a>" + Titles[i] + ":</p>");
    document.writeln("</td>\n<td><a onmouseover=\"eShow("" + Titles[i] + "")\"");
    document.writeln("onmouseout=\"eHide("" + Titles[i] + "")\"</a>");
    document.writeln("<font color=\"#0000FF\" size=\"3\" face=\"Arial\">");
    for (var j = 0; j < Text[i].length; j = j + nCols)
    {
      if (j > 0)
      {
        document.write(", ");
      }
      if (Text[i][j + 3] == 1)
      {
        document.write("<b>" + Text[i][j] + "</b>");
      }
      else
      {
        document.write(Text[i][j]);
      }
    }
    document.writeln("\n</font></a></td></tr>")
  }
</script>
</table>

</body>
</html>

[Baja en un único archivo .zip, las imágenes y demás archivos necesarios
para el funcionamiento de las demo de esta sección]