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

ErrorCorrection · 15 Şubat 2023

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.)

kaan.w · 15 Şubat 2023

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ı:

OlafRagnarsson · 15 Şubat 2023

Dostum pek Js bilmiyorum fakat istersen second dice kısmını önceden oluştur ama gizle. Butona bastığında göster.

ErrorCorrection · 15 Şubat 2023

OlafRagnarsson dedi:
Dostum pek JS bilmiyorum fakat istersen second dice kısmını önceden oluştur ama gizle. Butona bastığında göster.

Nasıl gizlenir bilmiyorum yani öyle bir şey var mı onu bile bilmiyorum.

OlafRagnarsson · 15 Şubat 2023

ErrorCorrection dedi:
Nasıl gizlenir bilmiyorum yani öyle bir şey var mı onu bile bilmiyorum.

Yani ilk başta css'de özelliğini visibility özelliğini hidden yap.
Butona basıldığında ise visibility=visible olsun.

W3Schools.com

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

Belki işine yarar.
Yeşille çevrili olan elementlerin visibility özellikleri baştan hidden olsun. Butona basınca visible olsun.

ErrorCorrection · 15 Şubat 2023

OlafRagnarsson dedi:
Yani ilk başta CSS'de özelliğini visibility özelliğini hidden yap.
Butona basıldığında ise visibility = visible olsun.

W3Schools.com

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

Belki işine yarar.

Ya direk osatır içine element ekleyip direk yapılıyor galiba ama yapamadım.

OlafRagnarsson · 15 Şubat 2023

ErrorCorrection dedi:
Ya direk osatır içine element ekleyip direk yapılıyor galiba ama yapamadım.

Dediğinizi anlamadım.

kaan.w · 15 Şubat 2023

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

ErrorCorrection · 15 Şubat 2023

kaan.w 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

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?

kaan.w · 15 Şubat 2023

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ı:

ErrorCorrection · 15 Şubat 2023

kaan.w 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

Hocam keşke hepsini yapmasaymışssınız. Ben yapacaktım.

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

Ayrıntılı düzenleme

ErrorCorrection

Hectopat

Dosya Ekleri

kaan.w

OlafRagnarsson

Hectopat

ErrorCorrection

Hectopat

OlafRagnarsson

Hectopat

W3Schools.com

Dosya Ekleri

ErrorCorrection

Hectopat

W3Schools.com

OlafRagnarsson

Hectopat

kaan.w

Megapat

ErrorCorrection

Hectopat

kaan.w

Megapat

ErrorCorrection

Hectopat

Benzer konular