
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <title>Formularios Dinamicos</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    <style type="text/css" media="all">

    .hide {
        visibility: hidden;
        display: none;
    }

    div.row {
        display: table-row;
        clear: both;
        padding: 2px;
        vertical-align: top;
    }

    div.row div {
        display: table-cell;
        padding: 2px;
        vertical-align: middle;
        float:left;
        display: inline;
    }

    div.row div.title {
        display: table-cell;
        padding: 2px;
        margin: 2px;
        background-color: #EFEBE7;
        font: bold 12px Verdana, Arial, Helvetica, serif;
        color: #153244;
        vertical-align: middle;
    }

    div.row div img{
        vertical-align: bottom;
        border:0px solid;
        padding-left: 1px;
    }

    input, textarea {
        font: 12px Verdana, Arial, Helvetica, serif;
        border: #153244 1px solid;
        color: #000000;
        background-color: #EFEBE7;
        padding: 1px 3px 1px 3px;
    }

    select {
        font: 12px Verdana, Arial, Helvetica, serif;
        border: #153244 1px solid;
        color: #000000;
        background-color: #EFEBE7;
    }

    </style>

    <script language="JavaScript" type="text/javascript">

    // Variable de Conteo de lineas
    var lineCount = new Array();

    /**
     * Agrega una linea de datos a un formulario
     * @param string div El ID del div objetivo donde se agrega una linea
     * @param string line El ID del div que contiene la linea a agregar
     * @param string f Funcion extra para pasarle a los eventos
     */
    function addFormLine(div, line, f)
    {
        var f = (f == null) ? "" : f;
        lineCount[div] = lineCount[div] == null ? 1 : lineCount[div] + 1;
        var mySelf = div + "_line_" + lineCount[div];
        var myNum = lineCount[div];
        var divTarget = document.getElementById(div);
        var divLine = document.getElementById(line).innerHTML;
        var divTitle = document.getElementById(line).getAttribute('title');
        var newDiv = document.createElement('div');
        newDiv.className = 'row';
        newDiv.setAttribute('id', mySelf);
        divLine = divLine.replace(/mySelf/g, mySelf);
        newDiv.innerHTML = divLine;
        newDiv.innerHTML += "<div class=\"cell\"><img style=\"cursor: pointer;\" src=\"remove.gif\" border=\"0\" onclick=\"removeFormLine(\'" + mySelf + "\'); " + f + "\"></div>";

        if (divTitle != null && divTarget.hasChildNodes() == false){
            var titles = divTitle.split(",");
            var newTitle = document.createElement('div');
            newTitle.className = 'row';
            for (i = 0; i < titles.length; ++i){
                var titleSize = titles[i].match(/\(\w+\)/,'');
                titleSize = titleSize[0].replace(/[\(\)]/g,'');
                var titleName = titles[i].replace(/\(\w+\)/,'');
                newTitle.innerHTML += "<div class=\"title\" style=\"width: " + titleSize + "px;\">" + titleName + "</div>";
            }
            divTarget.appendChild(newTitle);
            divTarget.setAttribute('cab', '1');
        }
        divTarget.appendChild(newDiv);
    }

    /**
     * Elimina una linea de un formulario
     * @param string div El ID del div que se quiere eliminar
     */
    function removeFormLine(div)
    {
        var parentName = div.replace(/_line_\w+/g, '');
        var divParent = document.getElementById(parentName);
        var divTarget = document.getElementById(div);
        var hasTitle = divParent.getAttribute('cab');
        divParent.removeChild(divTarget);
        if (hasTitle != null && divParent.childNodes.length == 1){
            divParent.innerHTML = "";
        }
    }

    </script>

</head>
<body>

<?php echo "Respuesta:<br><textarea cols=\"50\" rows=\"8\" readonly>" . htmlentities(print_r($_POST, true)) . "</textarea><br><br>"; ?>

    <form method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>">
        <a href="javascript:addFormLine('myDiv', 'myLine');">Agregar Linea +</a><br><br>
        <div id="myDiv"></div>
        <br>
        <input type="submit">
    </form>


    <div id="myLine" class="hide" title="Nombre(200),Categoria(200),Costo(50)">
        <div><input type="text" value="" name="nombre[]" maxlength="200" style="width: 200px"></div>
        <div><select id="list_categorias" name="categoria[]" style="width: 200px">
            <option value="0">Seleccione...</option>
            <option value="1">Viaticos</option>
            <option value="2">Equipo</option>
            <option value="3">Servicio</option>
            <option value="4">Otros</option>
        </select></div>
        <div><input type="text" value="" name="costo[]" maxlength="11" style="width: 50px"></div>
    </div>

</body>
</html>