Çözüldü JavaScript table içindeki tr tagına element ekleme

Bu konu çözüldü olarak işaretlenmiştir. Çözülmediğini düşünüyorsanız konuyu rapor edebilirsiniz.
ErrorCorrection

ErrorCorrection

Decipat
Katılım
11 Ağustos 2022
Mesajlar
2.428
Çözümler
4
HTML: 
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>website</title>

 <style type="text/css">
 table , tr ,th , td{
 border: 1px solid black;
 border-collapse: collapse;
 }

 </style>
</head>
<body>
 <button style="margin-bottom:15px ;" id="button" onclick="myfunction()">click me</button>
 <table id="mytable">

 <tr id="dices">
 <th>/</th>
 <th>first dice</th>
 </tr>

<tr id="example">
 <th>User</th>

</tr>

<tr>
 <th>computer</th>
</tr>

</table>

<script type="text/javascript">

const button = document.getElementById('button');

</script>
</body>
</html>

Butona tıkladığımda ekte gösterdiğim gibi first Dice'ın yanına second dice adlı bir r bölüm açsın.

(İnsertrow falan denedimde sürekli yeni bir satır açıyor.)
 

Dosya Ekleri

  • Ekran Görüntüsü - 2023-02-15 19-20-35.png
    Ekran Görüntüsü - 2023-02-15 19-20-35.png
    12,4 KB · Görüntüleme: 24
Çözüm
Kxaan
Bu şekilde yaptım. Sayıları 1-6 dahil rastgele olacak biçimde ayarladım boş durmasın diye.

HTML: 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Technopat</title>
        <style>
            table, tr, th, td {
                border: 1px solid black;
                border-collapse: collapse;
                margin-bottom: 16px;
            }
            #count-row th, #user-row th, #computer-row th {
                font-family: sans-serif;
                padding: 8px;
            }
            #user-row td, #computer-row td {
                text-align: center;
            }
        </style>
    </head>
    <body>
        <table>
            <tr id="count-row">
                <th>/</th>
            </tr>
            <tr id="user-row">
                <th>User</th>
            </tr>
            <tr id="computer-row">
                <th>Computer</th>
            </tr>
        </table>
        <button onclick="addColumn()">Add Column</button>
        <script>
            let count = 1;
            function addColumn() {
                const countRow = document.getElementById("count-row")
                const userRow = document.getElementById("user-row")
                const computerRow = document.getElementById("computer-row")

                countRow.innerHTML += `<th>${count}</th>`;
                count++;
                userRow.innerHTML += `<td>${~~(Math.random() * 6)}</td>`
                computerRow.innerHTML += `<td>${~~(Math.random() * 6)}</td>`
            }
        </script>
    </body>
</html>

Çıktı:
tabletech.png
Tarihe göre sırala Puana göre sırala
Kxaan dedi:
Sutün eklemeyi yaptıktan sonra rastgele sayı koyma kalıyordu zaten sadece. Yine de özür dilerim hocam. Anlamadığınız yerleri anlatabilirim.
Genişletmek için tıkla...

Bu arada ben element oluşturup içine innerHTML ile bir şey yazdırıyordum. Ama bu daha mantıklı.
1. $ neden kullanıldı hocam?
Bu kadar diğerlerini geçen konuda açıklamıştınız. Hatırlıyoum.
 
Artı 0 Eksi
$ ve ` kullanarak kolayca string içerisine değişken koyabiliyoruz.
JavaScript: 
let age = 19;
console.log(`merhaba ${age} yaşındayım.`);
console.log("merhaba " + age + " yaşındayım.");

/* KONSOL:
    merhaba 19 yaşındayım.
    merhaba 19 yaşındayım.
*/

Burada daha güzel örneklerle anlatıyor.
developer.mozilla.org

Template literals (Template strings) - JavaScript | MDN

Template literals are literals delimited with backtick (`) characters, allowing for multi-line strings, string interpolation with embedded expressions, and special constructs called tagged templates.
developer.mozilla.org developer.mozilla.org
 
Artı 0 Eksi
Kxaan dedi:
$ ve ` kullanarak kolayca string içerisine değişken koyabiliyoruz.
JavaScript: 
let age = 19;
console.log(`merhaba ${age} yaşındayım.`);
console.log("merhaba " + age + " yaşındayım.");

/* KONSOL:
 merhaba 19 yaşındayım.
 merhaba 19 yaşındayım.
*/

Burada daha güzel örneklerle ve detaylı açıklaması var.
developer.mozilla.org

Template literals (Template strings) - JavaScript | MDN

Template literals are literals delimited with backtick (`) characters, allowing for multi-line strings, string interpolation with embedded expressions, and special constructs called tagged templates.
developer.mozilla.org developer.mozilla.org
Genişletmek için tıkla...

' ' Bu iki değil de ' ' bunlar olsa?
 
Artı 0 Eksi
Kxaan dedi:
" ve ' işaretinin JavaScript için bir farkı yok. Template literals (yukarıda anlattığım) kullanılacağı zaman ` (backtick) kullanılıyor.
Genişletmek için tıkla...

Hocam 2 Variable'dan büyüğünü yazdırmak istiyorum ama if else döngüsüne sokmak çok uzun geliyor. Daha kısası yok mu?
Sayıları alıp Max'ını da alabilirim ama ben büyük olanın değerini yazdırmak istemiyorum.
Mesela:
const a = 10; const b = 20;
Burada B'yi yazdırmak istiyorum büyük olduğu için. Nasıl yapacağım?
 
Artı 0 Eksi
ErrorCorrection dedi:
Hocam 2 Variable'dan büyüğünü yazdırmak istiyorum ama if else döngüsüne sokmak çok uzun geliyor. Daha kısası yok mu?
Sayıları alıp Max'ını da alabilirim ama ben büyük olanın değerini yazdırmak istemiyorum.
Mesela:
const a = 10; const b = 20;
Burada B'yi yazdırmak istiyorum büyük olduğu için. Nasıl yapacağım?
Genişletmek için tıkla...
Yeni konu açın orada yardımcı olayım hocam.
 
Artı 0 Eksi

Benzer konular

Primearc
  • Çözüldü
Çözüldü  JavaScript'te elementin sonuna başka bir element ekleme
Mesaj
2
Görüntüleme
750
Primearc
Primearc
Mucosoft
  • Soru
JavaScript ile element ekleyince "onclick" fonksiyonu çalışmıyor
Mesaj
3
Görüntüleme
752
Rosalind
Rosalind
naimserkan
JavaScript  Tarayıcı içindeki developer konsolu kısmında Javascript kodlarımı göremiyorum
Mesaj
4
Görüntüleme
577
unknownuser
unknownuser
yone1108
JavaScript ile nasıl sepete ekleme özelliği yapılır?
Mesaj
8
Görüntüleme
1B
Administraktör
Administraktör
5
Node JS uygulamasına lisans ekleme içindeki kodları şifreleme
Mesaj
5
Görüntüleme
1B
RaSGooL
RaSGooL

Yeni konular

Yeni mesajlar

Geri
Yukarı