使用 javascript 在 td 中创建按钮

Question

我试图在每次单击添加按钮时在 table 中创建一个按钮。我在 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

不确定您的具体要求。但是你在哪里创建按钮？在 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);
}

Answer 2

在您的 table 中，您希望将按钮添加到哪个 td 中？它是新行中的第 5 个单元格吗？

我相信您想使用 row.findElementsByClassName 而不是 document.findElementsByClassName

来找到正确的 td

或者，您可以简单地将按钮直接附加到您刚刚使用 cell5.appendChild(button)

创建的单元格之一

使用 javascript 在 td 中创建按钮

Creating button in td using javascript

html

javascript

edit

button