WebHU - Programozási kérdések és válaszok

Hogyan adhatok hozzá gombot egy td-hez js használatával?

Van egy táblám, ami menet közben generálódik, mivel generálja a TD-it, az első TD-t egy gombnak szeretném beállítani. Lent van a kódom, nyilvánvalóan nem működik. Emlékszem egy másik problémámból, hogy meg tudjuk változtatni a div tartalmát a .html() segítségével, de ez itt sem működik.

Kód:

    var table = document.getElementById("userinfo");
    var thead, tr, td;
    table.appendChild(thead = document.createElement("thead"));
    thead.appendChild(tr = document.createElement("tr"));
    tr.appendChild(td = document.createElement("td"));
    td.innerHTML = "Email";
    tr.appendChild(td = document.createElement("td"));
    td.innerHTML = "First Name";
    tr.appendChild(td = document.createElement("td"));
    td.innerHTML = "Last Name";
    tr.appendChild(td = document.createElement("td"));
    td.innerHTML = "Is Active?";

    for (var i in data)
    {
        tr = document.createElement("tr");
        tr.setAttribute("id", "row" + i);
        if (i%2 == 0)
        {
            tr.setAttribute("style", "background:white");
        }

        var entry = data[i];
        console.log(entry);
        table.appendChild(tr);
        tr.appendChild(td = document.createElement("td"));
        td.setAttribute("html", "<input type=\"button\" class=\"btn\" value=\'" + entry.email + "\" onclick=\"" + chooseUser(entry) + "\"/>");
        tr.appendChild(td = document.createElement("td"));
        td.innerHTML = entry.first_name;
        tr.appendChild(td = document.createElement("td"));
        td.innerHTML = entry.last_name;
        tr.appendChild(td = document.createElement("td"));
        td.innerHTML = entry.isActive;
    }
javascript button
09.03.2013

  • Próbáltad az appendChild-et használni az innerHTML helyett a td csomóponthoz? 10.03.2013
  • Kis megjegyzés: appendChild a hozzáfűzött csomópontot adja vissza. A könnyebb olvasás érdekében tegyen valami ilyesmit: td = tr.appendChild(document.createElement('td')) - a kifejezések közepén lévő feladatok keletiek, hogy összezavarodjanak. 10.03.2013

Válaszok:


1

Használhatja a td.innerHTML = '<input type="button"...';-t, vagy megteheti a "megfelelő" módon:

var btn = document.createElement('input');
btn.type = "button";
btn.className = "btn";
btn.value = entry.email;
btn.onclick = (function(entry) {return function() {chooseUser(entry);}})(entry);
td.appendChild(btn);
09.03.2013
  • a fenébe, mindig is azt hittem, hogy az innerHTML nem jeleníti meg az um elemet. próbáld ki ezeket.\ 10.03.2013
  • inkább a második módszert btw. 10.03.2013
  • @Kolink: Korábban olvastam a td tag innerHTML-jéről. Bizonyos esetekben nem működik, ha nem tévedek. Szerintem az IE-ről volt szó. Ez igaz? 10.03.2013
  • kérdés: mire való ez az utolsó (bejegyzés)? 10.03.2013
  • Ez az egész szerkezet az entry értékét rögzíti. Ellenkező esetben, amikor a gombra kattint, mindig az utolsó entry értéket fogja használni a ciklus vége után. 10.03.2013
  • @JalalJaberi A innerHTML nem használható táblán, thead, tbody, tfoot vagy tr egyikén sem, de a td-vel visszaáll normál konténerré. 10.03.2013
  • @Niet the Dark Absol meg tudnád nézni a bejegyzésemet itt: link. Hasonló problémám van. Meg kell hívnom egy függvényt, amely veszi a ciklusindexet és egy másik értéket, amely a ciklus iterációjától függ. Azt akarom, hogy a funkció aktiválódjon kattintásra. Ezt nem sikerült megtenni. Mindig a ciklusiteráció utolsó indexét kapja meg. 28.05.2017
  • @NiettheDarkAbsol És hogyan használhatom ezt a szövegkörnyezet nélkül? Például azt mondani, hogy be akarok szúrni egy gombot, és egy adott azonosítóval renderelni (ha ez a helyes módja)? 21.11.2018

    • 2

    Ez működik nekem.

     var row = {};
     var myTable = document.querySelector("table#tableProducts>tbody");

     row = myTable.insertRow();

     row.insertCell(-1).textContent = "dummy";
     var lastRow = row;
     var lastCell = lastRow.cells[lastRow.cells.length - 1];
     lastCell.innerHTML = "<button id='btnEdit';>Editar</button>";
    28.11.2019
    Új anyagok
    A rádiógomb ellenőrzött eseményének használata a jQueryben
    Ebben a cikkben látni fogjuk, hogyan kell dolgozni a jquery választógombbal ellenőrzött eseményeivel. A választógombok HTML gombok, amelyek segítenek kiválasztani egyetlen értéket egy csoportból...
    Körkörös függőségek megoldása terraformban adatforrásokkal – lépésről lépésre
    Mi az a körkörös függőségek Dolgozzunk egy egyszerű eseten, amikor az SQS-sor és az S3-vödör közötti körkörös függőség problémája van egy egymástól függő címkeérték miatt. provider..
    Miért érdemes elkezdeni a kódolást 2023-ban?
    01100011 01101111 01100100 01100101 — beep boop beep boop Világunk folyamatosan fejlődik a technológia körül, és naponta fejlesztenek új technológiákat a valós problémák megoldására. Amint..
    🎙 Random Noise #2  – Örökbefogadás és hit
    az analitika íratlan világának gondozása Szeretné, hogy ezek a frissítések a postaládájába kerüljenek? Iratkozzon fel itt . "Ha önvezető autókat gyártanak, akkor mi miért ne..
    A legrosszabb politika és prediktív modellek májátültetésre jelöltek számára az Egyesült Államokban
    A máj (vagy óangolul lifer) az emberi test legnehezebb belső szervére utal, amely csendesen működik a nap 24 órájában. Mit csinál a máj? 500 feladatot hajt végre a szervezet egészségének..
    5 webhely, amely 2022-ben fejleszti front-end fejlesztői készségeit
    Frontendmentor.io A tényleges projektek létrehozásával a Frontendmentor.io segítséget nyújt a front-end kódolási képességeinek fejlesztésében. A kódolást azután kezdheti meg, hogy..
    Mikor kell használni a Type-t az interfészhez képest a TypeScriptben?
    A TypeScript a JavaScript gépelt szuperkészlete, amely statikus gépelést ad a nyelvhez. Ez megkönnyíti a robusztus és karbantartható kód írását azáltal, hogy a hibákat a fordítási időben..