У меня есть эта программа с таблицей, и если вы дважды щелкните TD, вам дадут 3 кнопки, которые могут «редактировать» двойной щелчок TD:

1. вы можете изменить текст с помощью одной кнопки, (1-я кнопка)
2. Вы можете изменить цвет фона на красный с помощью другой кнопки (2-я кнопка)
3. Вы удаляете все в TD последней кнопкой (3-я кнопка)

Прямо сейчас я не уверен, как написать функции для всех трех кнопок. Но я предпочту спросить о том, как изменить фон TD с помощью кнопки, когда кнопка нажата, эта функция захватывающая:

var clickedTD;

$(function () {
    $("td").dblclick(function (e) {
        $("#editHeader").css("display","block");
        clickedTD = event.target.id;
    });
});

$(function () {
    $(redBg).click(function (e) {
        $(clickedTD).css("background-color", "red");
    });
});

но это не меняет фон двойного щелчка TD. Что я делаю не так?

Полный фрагмент кода

JavaScript

function addElement() {
    var text = document.getElementById("input").value;

    // create a new div element and give it a unique id
    var newDiv = document.createElement("div");
    newDiv.id = "temp";

    // and give it some content
    var newContent = document.createTextNode(text);

    // add the text node to the newly created div
    newDiv.appendChild(newContent);

    // add the newly created element and its content into the DOM
    var currentDiv = document.getElementById("div1");
    document.body.insertBefore(newDiv, currentDiv);

    $(function () {
        var td = document.getElementsByTagName("td");
        var div = document.getElementsByTagName("div");

        $(div).draggable();
        $("#temp").draggable();

        $(td).droppable({
            drop: function (event, ui) {
                $(this).addClass("div").html(text);
                $("div").draggable();

                $("#temp").remove();
            },
        });
    });

    document.getElementById("input").value = " ";
}

var editTxt = document.getElementById("editTxt");
var redBg = document.getElementById("redBg");
var del = document.getElementById("del");
var clickedTD;

$(function () {
    $("td").dblclick(function (e) {
        $("#editHeader").css("display", "block");
        clickedTD = event.target.id;
    });
});

function closeEditH() {
    $("#editHeader").css("display", "none");
}

//edit text

$(function () {
    $(editTxt).click(function (e) {
        alert(".html() ... I'm not sure");
    });
});

//edit color

$(function () {
    $(redBg).click(function (e) {
        $(clickedTD).css("background-color", "red");
    });
});

//delete

$(function () {
    $(del).click(function (e) {
        $(clickedTD).parent().html("").removeClass("div");
        $("#editHeader").css("display", "none");
        alert("Wil this work in clearing the class and text?");
    });
});

function updateVal(currentEle, value) {
    $(currentEle).html(
        '<input class = "thVal" type = "text" value = "' + " " + '" />'
    );
    $(".thVal").focus();
    $(".thVal").keyup(function (event) {
        if (event.keyCode == 13) {
            $(currentEle).html($(".thVal").val().trim());
            $("#editHeader").css("display", "none");
        }
    });

    $(document).click(function () {
        $(currentEle).html($(".thVal").val().trim());
        $("#editHeader").css("display", "none");
    });
}

//"trash can"

$(function () {
    var trash = document.getElementById("trash");

    $(trash).droppable({
        drop: function (event, ui) {
            let removeEl = document.querySelector(
                "#" + ui.draggable[0].getAttribute("id")
            );
            removeEl.remove();
        },
    });
});

CSS

body {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

div {
    text-align: center;
    border: 1px solid #d3d3d3;
    width: 100px;
    padding: 10px;
    cursor: move;
    z-index: 10;
    background-color: #2196F3;
    color: #fff;
}


.div {
    text-align: center;
    padding: 10px;
    cursor: move;
    background-color: #2196F3;
    color: #fff;
}

.redBG {
    text-align: center;
    padding: 10px;
    cursor: move;
    background-color: red;
    color: #fff;
}

td {
    border: 1px solid #d3d3d3;
    padding: 10px;
    height: 20px;
    width: 200px;
}

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8" />
        <meta name = "viewport" content = "width=device-width" />
        <title>repl.it</title>
        <script src = "https://code.jquery.com/jquery-3.5.0.js"></script>
        <link href = "style.css" rel = "stylesheet" type = "text/css" />
        <link
            rel = "stylesheet"
            href = "//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"
        />
        <link rel = "stylesheet" href = "/resources/demos/style.css" />
        <script src = "https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src = "https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    </head>

    <body>
        <header id = "schedule">
            <p>Double click a td to edit:</p>

            <table border = "1">
                <tr>
                    <td width = "100" height = "50" id = "td1"></td>
                    <td width = "100" height = "50" id = "td1"></td>
                    <td width = "100" height = "50" id = "td1"></td>
                </tr>
            </table>

            <header id = "editHeader" style = "display: none">
                <p>Edit:</p>
                <button id = "editTxt">Edit Text</button>
                <br />
                <p>Edit color:</p>
                <button id = "redBg">Red</button>
                <br />
                <p>Delete all content in td:</p>
                <button id = "del">Delete</button>
                <p height = "20px"></p>
                <button onclick = "closeEditH()">Close</button>
            </header>
        </header>
    </body>

    <script src = "script.js"></script>
</html>