none
Javascript ile tablo doldurmak RRS feed

 > 

  • Soru

  • Question
    Oylamak İçin Oturum Aç
    0
    Oylamak İçin Oturum Aç

    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

  • Question
    Oylamak İçin Oturum Aç
    1
    Oylamak İçin Oturum Aç 
    <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

  • Question
    Oylamak İçin Oturum Aç
    1
    Oylamak İçin Oturum Aç
    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
    |
  • Question
    Oylamak İçin Oturum Aç
    0
    Oylamak İçin Oturum Aç

    Şö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
    |
  • Question
    Oylamak İçin Oturum Aç
    1
    Oylamak İçin Oturum Aç 
    <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
    |
  • Question
    Oylamak İçin Oturum Aç
    0
    Oylamak İçin Oturum Aç
    Ekliyor ama hemen siliniyor kendiliğinden.
    2 Ocak 2015 Cuma 14:41
    |
  • Question
    Oylamak İçin Oturum Aç
    1
    Oylamak İçin Oturum Aç
    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
    |
  • Question
    Oylamak İçin Oturum Aç
    0
    Oylamak İçin Oturum Aç
    Çok teşekkür ederim. Çalıştı. 

    2 Ocak 2015 Cuma 14:56
    |