使用javascript在td中創建按鈕

Question

我試圖在每次單擊添加按鈕時在表中創建一個按鈕。我在td中顯示的按鈕有問題。我確定它與我的JS有關。任何幫助，將不勝感激。 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

在你的餐桌，你希望按鈕加入到其中TD？它是新排中的第5個單元嗎？

我相信你想使用row.findElementsByClassName代替document.findElementsByClassName

或者找到正確的TD，你可以簡單地按鈕追加直接使用cell5.appendChild(button)

Answer 2

不知道你的確切要求。但是你在哪裏創建按鈕？在JavaScript中，您應該有var button = document.createElement("button")來創建一個按鈕。使用button.innerHTML 更改代碼之前添加此行 -

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); 
}