Schaltfläche in td mit Javascript erstellen

Question

Ich versuche, eine Schaltfläche in einer Tabelle jedes Mal zu erstellen, wenn die Schaltfläche Hinzufügen angeklickt wird. Ich habe Probleme mit dem Knopf, der in der td angezeigt wird. Ich bin mir sicher, dass es mit meinem JS zu tun hat. Jede Hilfe wäre willkommen. HTML:

      <button class="btn btn-primary pull-right" onclick="myCreateFunction()"> 
     Add new 
    </button> 
          <table class="table table-striped" border="4" cellpadding="3" cellspacing="1" id="usertable"> 
           <tr> 
            <th>First Name</th> 
            <th>Last Name</th> 
            <th>Title</th> 
            <th>Supervisor</th> 
            <th>Holiday</th> 
            <th>Edit</th> 
            <th>Delete</th> 

           </tr> 
           <?php while ($rowemployeelist = mysql_fetch_array($employeelistresult)) { ?> 

           <tr> 
            <td> 
             <?php echo $rowemployeelist["first_name"] ?> 
            </td> 

            <td> 
             <?php echo $rowemployeelist ["last_name"] ?> 
            </td> 

            <td> 
             <?php echo $rowemployeelist ["title"]?> 
            </td> 
            <td> 
             <?php echo $rowemployeelist ["supervisor"]?> 
            </td> 
            <td> 
             <?php echo $rowemployeelist ["holiday"]?> 
            </td> 
            <td><button class="editbtn">Edit</button></td> 

            <td><a href="delete.php?id=' . $row['id'] . '">Delete</a></td> 

           </tr> 
           <?php } ?> 
          </table> 

JS:

function myCreateFunction() { 
    var table = document.getElementById("usertable"); 
    var row = table.insertRow(1); 
    var cell1 = row.insertCell(0); 
    var cell2 = row.insertCell(1); 
    var cell3 = row.insertCell(2); 
    var cell4 = row.insertCell(3); 
    var cell5 = row.insertCell(4); 
    var cell5 = row.insertCell(5); 
    var cell6 = row.insertCell(6); 

    cell1.innerHTML = ""; 
    cell2.innerHTML = ""; 
    cell3.innerHTML = ""; 
    cell4.innerHTML = ""; 
    var button = document.createElement("button") 
    button. innerHTML = "Do Something"; 
    var td = document. getElementsByTagName("td")[0]; 
    td.appendChild(button); 


} 

Answer 1

In Ihrer Tabelle, die td sehen Sie die Schaltfläche wollen in hinzugefügt werden? Ist es die fünfte Zelle in der neuen Reihe?

Ich glaube, Sie die richtige td finden wollen durch row.findElementsByClassName statt document.findElementsByClassName

Alternativ verwenden Sie einfach die Taste direkt auf eine der Zellen cell5.appendChild(button)

Answer 2

Nicht sicher über Ihre genaue Anforderung. Aber wo erstellst du den Knopf? In Javascript sollten Sie var button = document.createElement("button") haben, um eine Schaltfläche zu erstellen. Fügen Sie diese Zeile vor button.innerHTML Changed Code -

function myCreateFunction() { 
    var table = document.getElementById("usertable"); 
    var row = table.insertRow(1); 
    var cell1 = row.insertCell(0); 
    var cell2 = row.insertCell(1); 
    var cell3 = row.insertCell(2); 
    var cell4 = row.insertCell(3); 
    var cell5 = row.insertCell(4); 
    var cell5 = row.insertCell(5); 
    var cell6 = row.insertCell(6); 

    cell1.innerHTML = ""; 
    cell2.innerHTML = ""; 
    cell3.innerHTML = ""; 
    cell4.innerHTML = ""; 
    var button = document.createElement("button"); 
    button.innerHTML = "Do Something"; 
    var td = document. getElementsByTagName("td")[0]; 
    td.appendChild(button); 
}