向动态创建的表行添加按钮

Posted 2023-01-06

因此，我试图将此按钮添加到动态创建的表行中。但老实说，我不知道该如何工作。该代码是一团糟，因为Iam尝试了很多事情才能实现这一目标。

我需要将此按钮（元素）附加到调用该函数的表行中，是否有任何聪明的方法可以做到这一点。如果我更改表格的结构，那就可以了。

function getPerson()
//addButton.value = "+";
//addButton.class = "btn btn-success";
$("#output1 tbody tr").remove();
fetch(url)
    .then(res => res.json())
    .then(data => 

        console.log(data);

        var temp = "";
        data.forEach((person) => 
            temp += "<tr>";
            temp += "<td>" +person.id+"</td>";
            console.log(person.id);
            temp += "<td>" +person.vorname+"</td>";
            temp += "<td>" +person.nachname+"</td>";
            temp += "<td>"
            person.projectList.forEach((project) => 
              temp += project.name+"<br>";
            );
            temp += "</td>"

            temp += "<td>"
            person.technoList.forEach((techno) => 
              temp += techno.name+"<br>";
            );
            temp += "</td>"




            temp += "<td id='addButton" + x + "' >" + addButton(person.id)+ "</td>"
             //this.parentElement.appendChild(this)
             x++;


            //document.getElementById('personDetail_Button').addEventListener('click', this.personDetail(person.id));
            temp += "</tr>"


        );

        document.getElementById("tableOutput").innerhtml= temp;

    );


function addButton(person_id)
  var person_id_onclick = person_id
  var element = document.createElement("input");
  element.type = 'button';
  element.value = 'test123';
  element.onclick = function()
    personDetail(person_id_onclick);
  
  $(element).addClass('btn btn-primary');
  //$(this).appendChild(element);
  document.body.appendChild(element);

<table class="table" id="output1">
        <thead class="thead-dark">
            <tr>
                <th scope="">ID</th>
                <th scope="col">Vorname</th>
                <th scope="col">Nachname</th>
                <th scope="col">Projekte</th>
                <th scope="col">Technologien</th>
                <th scope="col">Button</th>
            </tr>
        </thead>
        <tbody id="tableOutput">

        </tbody>

    </table>

答案

您可以尝试替换document.body.appendChild（element）;带有返回元素；我还更新了功能，以删除随机jquery类。

function addButton(person_id)
  var person_id_onclick = person_id
  var element = document.createElement("input");
  element.type = 'button';
  element.value = 'test123';
  element.onclick = function()
    personDetail(person_id_onclick);
  
  element.setAttribute("class","btn btn-primary");

 return element;