uniwebsidad

Este foro ya no está activo, así que no puedes publicar nuevas preguntas ni responder a las preguntas existentes.

Agregar tablas dinámicamente con JavaScript

2 de septiembre de 2015

Hola !! soy nuevo en algunos lenguajes y tengo el siguiente problema , quiero agregar una tabla y que vaya continuando la numeración, y que tenga como mínimo 1 y máximo 5. espero me puedan ayudar muchas gracias ..

<p><strong>Idiomas </strong></p>
<form id="miform3" method="post" name="miform3" >
 
<table id="tabla3" class="table table-hover table-bordered">
 
                    <div class="col-md-7">
 
                      <thead>
                        <tr>
                          <th></th>  //CAMPO NUMERACION
                          <th> IDIOMA</th>
                             <th> Nivel</th>
                             <th>Experiencia</th>
                            <th>Certificado</th>
                            <th></th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td>1</td>
                           <td>
                                <div class="col-md-12"> 
                  <div class="form-group"> 
                  <select id="sfd" class="form-control"> 
                 <option selected="selected" value="0">Idiomas</option>
    <option value="47">Español</option>
    <option value="77">Inglés</option>
    <option value="135">Portugués</option>
    <option value="140">Ruso</option>
    <option value="184">Árabe</option>
    <option value="33">Chino</option>
    <option value="55">Francés</option>
    <option value="7">Alemán</option>
    <option value="1">Abjaso</option>
    <option value="2">Afar</option>
    <option value="3">Afrikaans</option>
    <option value="4">Aimara</option>
    <option value="5">Akano</option>
    <option value="6">Albanés</option>
    <option value="8">Amárico</option>
    <option value="9">Aragonés</option>
    <option value="10">Armenio</option>
    <option value="11">Asamés</option>
    <option value="12">Avar</option>
    <option value="13">Avéstico</option>
    <option value="14">Azerí</option>
    <option value="15">Bambara</option>
    <option value="16">Baskir</option>
    <option value="17">Bengalí</option>
    <option value="18">Bhojpurí</option>
    <option value="19">Bielorruso</option>
    <option value="20">Birmano</option>
    <option value="21">Bislama</option>
    <option value="22">Bosnio</option>
    <option value="23">Bretón</option>
    <option value="24">Búlgaro</option>
    <option value="25">Cachemiro</option>
    <option value="26">Camboyano</option>
    <option value="27">Canarés</option>
    <option value="28">Catalán</option>
    <option value="29">Chamorro</option>
    <option value="30">Checheno</option>
    <option value="31">Checo</option>
    <option value="32">Chichewa</option>
    <option value="34">Chuan</option>
    <option value="35">Chuvasio</option>
    <option value="36">Cingalés</option>
    <option value="37">Coreano</option>
    <option value="38">Corso</option>
    <option value="39">Cree</option>
    <option value="40">Croata</option>
    <option value="41">Córnico</option>
    <option value="42">Danés</option>
    <option value="43">Dzongkha</option>
    <option value="44">Eslavo</option>
    <option value="45">Eslovaco</option>
    <option value="46">Esloveno</option>
    <option value="48">Esperanto</option>
    <option value="49">Estonio</option>
    <option value="50">Euskera</option>
    <option value="51">Ewe</option>
    <option value="52">Feroés</option>
    <option value="53">Finés</option>
    <option value="54">Fiyiano</option>
    <option value="56">Frisón</option>
    <option value="57">Fula</option>
    <option value="58">Gallego</option>
    <option value="59">Galés</option>
    <option value="60">Gaélico</option>
    <option value="61">Gaélico Escocés</option>
    <option value="62">Georgiano</option>
    <option value="63">Griego</option>
    <option value="64">Groenlandés</option>
    <option value="65">Guaraní</option>
    <option value="66">Guyaratí</option>
    <option value="67">Haitiano</option>
    <option value="68">Hausa</option>
    <option value="69">Hebreo</option>
    <option value="70">Herero</option>
    <option value="71">Hindú</option>
    <option value="72">Hiri Motu</option>
    <option value="73">Húngaro</option>
    <option value="74">Ido</option>
    <option value="75">Igbo</option>
    <option value="76">Indonesio</option>
    <option value="78">Interlingua</option>
    <option value="79">Inuktitut</option>
    <option value="80">Inupiaq</option>
    <option value="81">Islandés</option>
    <option value="82">Italiano</option>
    <option value="83">Japonés</option>
    <option value="84">Javanés</option>
    <option value="85">Kanuri</option>
    <option value="86">Kazajo</option>
    <option value="87">Kikuyu</option>
    <option value="88">Kirguís</option>
    <option value="89">Kirundi</option>
    <option value="90">Komi</option>
    <option value="91">Kongo</option>
    <option value="92">Kuanyama</option>
    <option value="93">Kurdo</option>
    <option value="94">Lao</option>
    <option value="95">Latín</option>
    <option value="96">Letón</option>
    <option value="97">Limburgués</option>
    <option value="98">Lingala</option>
    <option value="99">Lituano</option>
    <option value="100">Luba-Katanga</option>
    <option value="101">Luganda</option>
    <option value="102">Luxemburgués</option>
    <option value="103">Macedonio</option>
    <option value="104">Malayalam</option>
    <option value="105">Malayo</option>
    <option value="106">Maldivo</option>
    <option value="107">Malgache</option>
    <option value="108">Maltés</option>
    <option value="109">Manés</option>
    <option value="110">Maorí</option>
    <option value="185">Mapugundun</option>
    <option value="111">Maratí</option>
    <option value="112">Marshalés</option>
    <option value="113">Mongol</option>
    <option value="114">Nauruano</option>
    <option value="115">Navajo</option>
    <option value="116">Ndebele Del Norte</option>
    <option value="117">Ndebele Del Sur</option>
    <option value="118">Ndonga</option>
    <option value="119">Neerlandés</option>
    <option value="120">Nepalí</option>
    <option value="121">Noruego</option>
    <option value="122">Noruego Bokmål</option>
    <option value="123">Nynorsk</option>
    <option value="124">Occidental</option>
    <option value="125">Occitano</option>
    <option value="126">Ojibwa</option>
    <option value="127">Oriya</option>
    <option value="128">Oromo</option>
    <option value="129">Osético</option>
    <option value="130">Pali</option>
    <option value="131">Panyabí</option>
    <option value="132">Pastú</option>
    <option value="133">Persa</option>
    <option value="134">Polaco</option>
    <option value="136">Quechua</option>
    <option value="137">Romanche</option>
    <option value="138">Ruandés</option>
    <option value="139">Rumano</option>
    <option value="141">Sami Septentrional</option>
    <option value="142">Samoano</option>
    <option value="143">Sango</option>
    <option value="144">Sardo</option>
    <option value="145">Serbio</option>
    <option value="146">Sesotho</option>
    <option value="147">Setsuana</option>
    <option value="148">Shona</option>
    <option value="149">Sindhi</option>
    <option value="150">Somalí</option>
    <option value="151">Suajili</option>
    <option value="152">Suazi</option>
    <option value="153">Sueco</option>
    <option value="154">Sundanés</option>
    <option value="155">Sánscrito</option>
    <option value="156">Tagalo</option>
    <option value="157">Tahitiano</option>
    <option value="158">Tailandés</option>
    <option value="159">Tamil</option>
    <option value="160">Tayiko</option>
    <option value="161">Telugú</option>
    <option value="162">Tibetano</option>
    <option value="163">Tigriña</option>
    <option value="164">Tongano</option>
    <option value="165">Tsonga</option>
    <option value="166">Turco</option>
    <option value="167">Turcomano</option>
    <option value="168">Twi</option>
    <option value="169">Tártaro</option>
    <option value="170">Ucraniano</option>
    <option value="171">Uigur</option>
    <option value="172">Urdu</option>
    <option value="173">Uzbeko</option>
    <option value="174">Valón</option>
    <option value="175">Venda</option>
    <option value="176">Vietnamita</option>
    <option value="177">Volapük</option>
    <option value="178">Wolof</option>
    <option value="179">Xhosa</option>
    <option value="180">Yi De Sichuán</option>
    <option value="181">Yoruba</option>
    <option value="182">Yídish</option>
    <option value="183">Zulú</option>
              </select>                                                 
                  </div>                                             
                  </div> 
                         </td>
 
                <td>
                            <div class="col-md-12"> 
                  <div class="form-group"> 
                  <select id="sfd" class="form-control"> 
                <option selected="selected" value="0">Nivel</option>
    <option value="1">Muy Básico
</option>
    <option value="2">Básico
</option>
    <option value="3">Intermedio
</option>
    <option value="4">Avanzado
</option>
    <option value="5">Nativo
</option>
              </select>                                                 
                  </div>                                             
                  </div>            
                         </td>
 
                            <td>
                                  <div class="col-md-12"> 
                                <div class="form-group"> 
                  <select id="sfd" class="form-control"> 
                    <option value="0">Experiencia</option>
    <option value="1">1 año</option>
    <option value="2">2 años</option>
    <option value="3">3 años</option>
    <option value="4">4 años</option>
    <option value="5">5 años</option>
    <option value="6">6 años</option>
    <option value="7">7 años</option>
    <option value="8">8 años</option>
    <option value="9">9 años</option>
    <option value="10">10 años</option>
    <option value="11">11 años</option>
    <option value="12">12 años</option>
    <option value="13">13 años</option>
    <option value="14">14 años</option>
    <option value="15">15 años</option>
    <option value="16">16 años</option>
    <option value="17">17 años</option>
    <option value="18">18 años</option>
    <option value="19">19 años</option>
    <option value="20">20 años</option>
<option value="21">Más de 25 años</option>                      
                  </select>                                                 
                  </div> 
                                </div>
                                      </td>
 
                            <td>  
 
                              <div class="col-md-12"> 
               <div class="form-group">
                <input type="text" class="form-control" placeholder="Certificado/titulo">
                </div>
                </div>
                            </td>
 
                    <td class="eliminar"> 
                 <div class="col-md-4"> 
                      <div class="form-group">
               <button id="eliminar" class="btn btn-warning"><i class="fa fa-times"></i>Eliminar</button>
                     </div>
                </div>   
 
                    </td>
 
                        </tr>
 
                      </tbody>
                    </table>
                         <div class="col-md-6"> 
 
            <input type="button" class="btn btn-primary"  id="agregar3" value="Agregar software" />
                    <button id="btnsubmit" type="submit" class="btn btn-success">Guardar</button>
                      </div>
         </form>
<script type="text/javascript">
$(function() {
    var count = 1;
    jQuery("#miform").validationEngine({
        promptPosition: "centerRight:0,-5"
    });
 
    $("#miform").submit(function(event) {
        var frm = $(this);
        var formulario = $(this).serialize();
 
        if ($('#miform').validationEngine('validate')) {
            $.post("guardar.php", formulario)
                .done(function(data) {
                    alert(data);
                    $(frm)[0].reset();
                })
                .fail(function() {
                    alert("DATOS GUARDADOS EN LA BD");
                });
        }
        event.preventDefault();
    });
 
    var count = 1;
    jQuery("#miform").validationEngine({
        promptPosition: "centerRight:0,-5"
    });
 
    // Clona la fila oculta que tiene los campos base, y la agrega al final de la tabla
    $("#agregar").on('click', function(event) {
        $("#tabla tbody tr:eq(0)").clone().removeClass('fila-base').appendTo("#tabla tbody");
 
    });
 
    // Evento que selecciona la fila y la elimina 
    $(document).on("click", ".eliminar", function() {
        var parent = $(this).parents().get(0);
        $(parent).remove();
    });
});
</script>
ajax css html javascript jquery php