使用 JQuery 创建按钮和单击处理程序

Question

目前我正在显示 table 个值，其中最后一列提供 "Edit" 和 "Delete" 选项。为简单起见，当他们编辑一行时，我只是清除每一列的 innerHTML 并将输入字段放在那里。我还需要用 Save/Cancel 替换 Edit/Delete 链接，但是我需要用 JS/JQuery 创建这些按钮，将点击处理程序附加到它们，将它们附加到 innerHTML。

虽然我找到了类似的示例，但我不太清楚如何完成此操作，希望得到任何帮助。

function editRecord(line)
{
    var zone = "<?= $data['zone']; ?>";

    // Store the original field values
    var valueName = document.getElementById("entryName" + line).innerHTML;
    var valueTTL = document.getElementById("entryTTL" + line).innerHTML;
    var valueAddress = document.getElementById("entryAddress" + line).innerHTML;

    // Replace existing row value with input fields to make edits
    document.getElementById("entryName" + line).innerHTML = "<input type='text' value='" + valueName + "'>";
    document.getElementById("entryTTL" + line).innerHTML = "<input type='text' value='" + valueTTL + "'>";
    document.getElementById("entryAddress" + line).innerHTML = "<input type='text' value='" + valueAddress + "'>";

    // Create Save button with click handler
    // Create Cancel button with click handler
    // Append these to the element below (replacing the Edit/Delete)

    document.getElementById("entryOptions" + line).innerHTML = "<input type='button' value='Save'> <input type='button' value='Cancel'>";
}

Answer 1

经过进一步的修修补补，我终于弄明白了。如果它最终可以帮助其他人，这是工作代码。

function editRecord(line)
{
    var zone = "<?= $data['zone']; ?>";

    // Store the original field values
    var originalName = document.getElementById("entryName" + line).innerHTML;
    var originalTTL = document.getElementById("entryTTL" + line).innerHTML;
    var originalAddress = document.getElementById("entryAddress" + line).innerHTML;

    // Replace existing row value with input fields to make edits
    document.getElementById("entryName" + line).innerHTML = "<input type='text' value='" + originalName + "'>";
    document.getElementById("entryTTL" + line).innerHTML = "<input type='text' value='" + originalTTL + "'>";
    document.getElementById("entryAddress" + line).innerHTML = "<input type='text' value='" + originalAddress + "'>";

    document.getElementById("entryOptions" + line).innerHTML = "";

    var saveButton = $('<button/>', {
        text: "Save",
        id: 'btn_Save' + line,
        click: function ()
        {
            // Save the changes
        }
    });

    var cancelButton = $('<button/>', {
        text: "Cancel",
        id: 'btn_Cancel' + line,
        click: function ()
        {
            document.getElementById("entryName" + line).innerHTML = originalName;
            document.getElementById("entryTTL" + line).innerHTML = originalTTL;
            document.getElementById("entryAddress" + line).innerHTML = originalAddress;
        }
    });

    $("#entryOptions" + line).append(saveButton);
    $("#entryOptions" + line).append(cancelButton);
}

使用 JQuery 创建按钮和单击处理程序

Create button and click handler with JQuery

html

javascript

jquery

onclick

event-handling