none
Javascript ile tablo doldurmak RRS feed

  • Soru

  • Merhaba.

    Javascript ile tablo doldurmaya çalışıyorum. İnternetten böyle birşey denedim ama çalıştıramadım.Kodum böyle .Eksiğim nedir?

    head runat="server">
        <title></title>
          <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
        <script>       
            var ad = ($("#ad").val())
            var soyad = ($("#soyad").val())

            var i = $('li').size() + 1;
         
            $('a#ekle').click(function () {
                $('<li id="' + i + '">' + ad + ' ' + soyad + ' ').appendTo('#tablolar');
                i++;
            });
                
            $('a#sil').click(function () {
                   $('li:last').remove();
                   i--;
               });
          
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
       <ul id="Tablolar">     
            <li>Ad:</li>      
            <li>Soyad:</li>      
            
       </ul>
            <label>Ad:</label>
            <input id="ad" type="text" />
            <label>Soyad:</label>
            <input id="soyad" type="text" />
           
          <a href="#" id="ekle">Ekle</a> - <a href="#" id="sil">Sil</a>
        </div>
            
        </form>
    </body>

    2 Ocak 2015 Cuma 09:13

Yanıtlar

  • <fieldset>
    <legend>Yeni Kişi Ekle</legend>
    <div>
        Ad
        <br />
        <input type="text" id="Name" name="Name" placeholder="ad yazınız..." />
    </div>
    <div>
        Soyad
        <br />
        <input type="text" id="Surname" name="Surname" placeholder="soyad yazınız..." />
    </div>
    <div>
       <button id="addItem">+ Ekle</button>
    </div>
    </fieldset>
    <table>
      <thead>
         <tr>
             <th>Ad</th>
             <th>Soyad</th>
         </tr>
      </thead>
      <tbody id="liste">
      </tbody>
    </table>
    
    <script>
        $(function() {
          $('#addItem').click(function() {
              if($('#Name').val() != '' && $('#Surname').val() != '')
                  $('#liste').append('<tr><td>' + $('#Name').val() + '</td><td>' + $('#Surname').val() + '</td></tr>');
          });
        });
    </script>
    yok illa böyle yapacam diyorsan...

    www.mvcblog.org
    e-mail: onay[nokta]yalciner[at]hotmail[nokta]com


    2 Ocak 2015 Cuma 14:31

Tüm Yanıtlar

  • KnockoutJs ya da AngularJs kullansana, bu şekilde çok uğraştırır.

    www.mvcblog.org
    e-mail: onay[nokta]yalciner[at]hotmail[nokta]com

    2 Ocak 2015 Cuma 09:18
  • Şöyle bir kod buldum. İlk başta bir textbox yanında ekle butonu var. Bu ekleye bastıkça alta yeni bir textboxı yanında ekle yerine sil butonu ile ekliyor. Sile basınca siliyor. Ben textboxı değilde girdigim ad ve soyadı eklemek istiyorum. Buna nasıl uyarlayabilirim? Tablo içine satır (<tr> içine <td>) eklemek mümkün mü?

    <script>
            $(window).load(function () {

                $(function () {

                    var scntDiv = $('#listValue');
                    var i = $('#listValue').size() + 1;

                    $(document).on('click', '#addItem', function () {
                        $('<span><input name="inputName[]" type="text" /> <a id="delItem" href="#">Sil</a><br /></span>').appendTo(scntDiv);
                        i++;
                        return false;
                    });

                    $(document).on('click', '#delItem', function () {
                        if (i > 2) {
                            $(this).parents('span').remove();
                            i--;
                        }
                        return false;
                    });

                });

            });
        </script>

     <ul class="addDelList">
          <li id="listValue">
           <input name="inputName[]" type="text" />
           <a href="#" id="addItem">Ekle</a><br />
          </li>
        </ul>


    2 Ocak 2015 Cuma 14:07
  • <fieldset>
    <legend>Yeni Kişi Ekle</legend>
    <div>
        Ad
        <br />
        <input type="text" id="Name" name="Name" placeholder="ad yazınız..." />
    </div>
    <div>
        Soyad
        <br />
        <input type="text" id="Surname" name="Surname" placeholder="soyad yazınız..." />
    </div>
    <div>
       <button id="addItem">+ Ekle</button>
    </div>
    </fieldset>
    <table>
      <thead>
         <tr>
             <th>Ad</th>
             <th>Soyad</th>
         </tr>
      </thead>
      <tbody id="liste">
      </tbody>
    </table>
    
    <script>
        $(function() {
          $('#addItem').click(function() {
              if($('#Name').val() != '' && $('#Surname').val() != '')
                  $('#liste').append('<tr><td>' + $('#Name').val() + '</td><td>' + $('#Surname').val() + '</td></tr>');
          });
        });
    </script>
    yok illa böyle yapacam diyorsan...

    www.mvcblog.org
    e-mail: onay[nokta]yalciner[at]hotmail[nokta]com


    2 Ocak 2015 Cuma 14:31
  • Ekliyor ama hemen siliniyor kendiliğinden.
    2 Ocak 2015 Cuma 14:41
  • button sayfayı post ediyordur, aşağıdaki gibi denesene;
    <button id="addItem" type="button">+ Ekle</button>

    www.mvcblog.org
    e-mail: onay[nokta]yalciner[at]hotmail[nokta]com

    2 Ocak 2015 Cuma 14:48
  • Çok teşekkür ederim. Çalıştı. 

    2 Ocak 2015 Cuma 14:56