Çö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
ErrorCorrection dedi:
Nasıl gizlenir bilmiyorum yani öyle bir şey var mı onu bile bilmiyorum.
Genişletmek için tıkla...
Yani ilk başta css'de özelliğini visibility özelliğini hidden yap.
Butona basıldığında ise visibility=visible olsun.
www.w3schools.com

CSS visibility property

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com www.w3schools.com
Belki işine yarar.
Yeşille çevrili olan elementlerin visibility özellikleri baştan hidden olsun. Butona basınca visible olsun.
 

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
    14,6 KB · Görüntüleme: 19
Artı 0 Eksi
Lokantacı dedi:
Yani ilk başta CSS'de özelliğini visibility özelliğini hidden yap.
Butona basıldığında ise visibility = visible olsun.
www.w3schools.com

CSS visibility property

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com www.w3schools.com
Belki işine yarar.
Genişletmek için tıkla...

Ya direk osatır içine element ekleyip direk yapılıyor galiba ama yapamadım.
 
Artı 0 Eksi
User ve Computer üst tarafa, 1. 2. 3. dice kısmı sola gelse nasıl olur? Sadece aşağıya doğru satır ekleriz böylece. Uygulamanın amacını da söylerseniz iyi olur. Ne yapmak istediğinizi tam anlamadım.
/​
User​
Computer​
1. dice​
2. dice​
 
Artı 0 Eksi
Kxaan dedi:
User ve Computer üst tarafa, 1. 2. 3. dice kısmı sola gelse nasıl olur? Sadece aşağıya doğru satır ekleriz böylece.
/​
User​
Computer​
1. dice​
2. dice​
Genişletmek için tıkla...

curling-scoreboard.png


Böyle olmasını istiyorum hocam.
Hocam Her satır için bir tane daha element ekleyemez miyiz? Zaten başlıklar (second, Third) tek bir <tr> içine geleceği için sizce yapılabilir mi?
 
Artı 0 Eksi
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
 
Son düzenleme:
Artı 0 Eksi
Çözüm
Kxaan dedi:
Bu şekilde yaptım.

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ı:
Eki Görüntüle 1670005
Genişletmek için tıkla...

Hocam keşke hepsini yapmasaymışssınız. Ben yapacaktım. :(
 
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ı