[Çözüldü] jQuery'de HTML tablo'su nasıl klonlanır?

Başlatan Timur, 07 Şubat 2012 - 17:22:11

« önceki - sonraki »

0 Üyeler ve 1 Ziyaretçi konuyu incelemekte.

Yazdır
Aşağı git Sayfa1
Kullanıcı Eylemleri

Timur

07 Şubat 2012 - 17:22:11 Son düzenlenme: 10 Şubat 2012 - 17:31:11 Timur
Diyelimki elimde aşağıda kodunu yazdığım gibi bir table var arkadaşlar. Bunun aynısının ben butona tıklayınca ilk table'ın altında da oluşmasını istiyorum. Bunu nasıl yapabilirim? jQuery çalışıyorum şu aralar, eğer jQuery ile yapılabilirse bana neyi öğrenmem gerektiğini ve nasıl yapacağımı anlatabilir misiniz?  :)

edit: .clone() api'si varmış. ona çalışıyorum şimdi. çalışmazsa yine sorarım  ;D (A)


Mesaj tekrarı yüzünden mesajınız birleştirildi. Bu mesajın gönderim tarihi : 08 Şubat 2012 - 09:14:35



Klonlama sorununu aşağıdaki script ile çözdüm arkadaşlar. Fakat şimdi de şöyle bir sorun var, oluşturlan bütün tablolar içerisindeki bütün radio butonların "name" özellikleri aynı olduğu için 5 tane klon oluştursam da genelde sadece 1 tane radio butona tıklayabiliyorum.
Kod Seç

<html>
<head>
<title> html table klonlama</title>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>

<script type="text/javascript">
$(document).ready(function() {
        });

function clonetable () {
$("#table1").clone().appendTo("#div1");
}
</script>
</head>

<body>

<input type="button" id="button1" name="clonner" value="clone table" onClick="clonetable()" />

<br /><br />

<div id="div1">
<table border="1" id="table1">
<tr>
<td colspan="5">Question text will be here</td>
</tr>
<tr>
<td><input type="radio" id="A" name="ans" />answer1 <br /></td>
<td><input type="radio" id="B" name="ans" />answer2 <br /></td>
<td><input type="radio" id="C" name="ans" />answer3 <br /></td>
<td><input type="radio" id="D" name="ans" />answer4 <br /></td>
<td><input type="radio" id="E" name="ans" />answer5 <br /></td>
</tr>
</table>
</div>

</body>
</html>

cagriemer

#1
08 Şubat 2012 - 11:20:03
Basligi isteginiz uzerine yeniden aciyorum.

Timur

#2
08 Şubat 2012 - 11:24:07 Son düzenlenme: 08 Şubat 2012 - 17:01:10 Timur
Alıntı yapılan: cagriemer - 08 Şubat 2012 - 11:20:03
Basligi isteginiz uzerine yeniden aciyorum.

teşekkürler.


Mesaj tekrarı yüzünden mesajınız birleştirildi. Bu mesajın gönderim tarihi : 08 Şubat 2012 - 13:23:22

http://api.jquery.com/attr/

attribute değiştirmek için yukarıdaki linkte verilen api'yi kullanacakmışım. şimdi geriye sadece bunun için bir döngü yazmak kaldı  ;D

Timur

#3
10 Şubat 2012 - 14:09:50
jQuery'de aşağıdaki html tablosu içerisinde bulunan ve klonladığım tablo içerisinde oluşan radiobuttonların name özelliğini dinamik olarak değiştirmek istiyorum. yani kullanıcı ilk kez klonla butonuna bastığında name özellikleri otomatik olarak 1. klon table'ın içerisinde ans1, ikinci kez tıkladığında 2. klon table'ın içerisinde ans2, üçüncü kez tıkladığında ans3..  olsun istiyorum. Bu konuda bana yardımcı olabilir misiniz arkadaşlar?

Kod Seç

<div id="div1">
<table border="1" id="tbl0" name="tbl0">
<tr>
<td colspan="5">Question text will be here</td>
</tr>
<tr>
<td><input type="radio" id="A" class="radioStyle" name="ans" />answer1 <br /></td>
<td><input type="radio" id="B" class="radioStyle" name="ans" />answer2 <br /></td>
<td><input type="radio" id="C" class="radioStyle" name="ans" />answer3 <br /></td>
<td><input type="radio" id="D" class="radioStyle" name="ans" />answer4 <br /></td>
<td><input type="radio" id="E" class="radioStyle" name="ans" />answer5 <br /></td>
</tr>
</table>
</div>

alquirel

#4
10 Şubat 2012 - 14:46:33
Hemen hemen aynı sorundan bahseden iki başlığınızı birleştirdim.
Bir önceki iletinizde dediğiniz gibi kullanacağınız metod "attr".

Mesela

Kod Seç

// Burası ile o an mevcut kaç tane tablo olduğunu öğrenip yenisi için ID üretiyoruz.
var yeniID = eval ($(".soruTablo").length + 1);

var clonTable = $(".soruTablo").clone().attr("id", "tbl" + yeniID); //Klonladık

$("input[type=radio]", cloneTable).attr("name", "ans" + yeniID); //hepsinin name özelliğini değiştirdik.


Malesef denemeden yazdım, olası hataları bildirirsiniz.

Timur

#5
10 Şubat 2012 - 15:23:45 Son düzenlenme: 10 Şubat 2012 - 15:39:35 Timur
name özelliği hala değişmiyor hocam. firebug'a baktım fakat herhangibir mesaj da yok
(edit: biraz değişiklik yapmaya çalıştım ama hala yok)

alquirel

#6
10 Şubat 2012 - 15:53:54
Şunu deneyelim bir de

Kod Seç

$("input[type=radio]", cloneTable).each(function(){
    $(this).attr("name", "ans" + yeniID);
});

Timur

#7
10 Şubat 2012 - 17:30:33
buraya bakmadan çözdüm bile hocam  :) şöyle bir script ile bir div içerisindeki table'ı ve onun içerisindeki radiobuttonları klonladım. klonlanan tabloların id'si ve klonlanan radiobuttonların name özelliğini değiştirebiliyorum.

Kod Seç

function clonetable() {
var aydi = $('input#gizli').val();
$table = $('table#tbl0').clone().attr('id', '#table' + aydi).appendTo("#div1");
$("input[type='radio']", $table).prop("name", "ans_" + aydi);
aydi++;
$('input#gizli').val(aydi);     
}


"gizli"ye gelince, o da şuradan geliyor.  :D

Kod Seç
<input type="hidden" id="gizli" name="gizli" value="0" />

alquirel

#8
10 Şubat 2012 - 17:32:41
Bize de kilitlemek düşüyor. ;)
Yazdır
Yukarı git Sayfa1
Kullanıcı Eylemleri