Javascript 如何使用jQuery更改td的背景

我有一个带有表格的程序，如果你双击td，你会得到3个按钮，可以“编辑”双击的td：

您可以通过一个按钮（第一个按钮）更改文本

您可以使用另一个按钮（第二个按钮）将背景色更改为红色

使用最后一个按钮（第三个按钮）删除td中的所有内容

现在，我不确定如何为所有三个按钮编写函数。但我会选择询问如何在点击按钮时使用按钮更改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的背景。我做错了什么

以下是我的代码的完整版本：

函数addElement（）{
var text=document.getElementById（“输入”）.value；
//创建一个新的div元素并给它一个唯一的id
var newDiv=document.createElement（“div”）；
newDiv.id='temp'
//给它一些内容
var newContent=document.createTextNode（文本）；
//将文本节点添加到新创建的div
newDiv.appendChild（newContent）；
//将新创建的元素及其内容添加到DOM中
var currentDiv=document.getElementById（“div1”）；
document.body.insertBefore（newDiv，currentDiv）；
$（函数（）{
var td=document.getElementsByTagName（'td'）；
var div=document.getElementsByTagName（'div'）；
$（div.draggable（）；
$（“#temp”）.draggable（）；
$（td）.可拖放({
drop:函数（事件，ui）{
$（本）
.addClass（“div”）
.html（文本）；
$（“div”）.draggable（）；
$（“#temp”）.remove（）；
}
});
});
document.getElementById（“输入”）.value=“”；
}
var editTxt=document.getElementById（“editTxt”）；
var redBg=document.getElementById（“redBg”）；
var del=document.getElementById（“del”）；
var-clickedTD；
$（函数（）{
$（“td”）.dblclick（函数（e）{
$（“#editHeader”）.css（“显示”、“块”）；
单击edtd=event.target.id；
});
});
函数closeEditH（）{
$（“#editHeader”）.css（“显示”、“无”）；
}
//编辑文本
$（函数（）{
$（编辑文本）。单击（函数（e）{
警报（“.html（）…我不确定”）；
});
});
//编辑颜色
$（函数（）{
$（redBg）。单击（函数（e）{
$（clickedTD）.css（“背景色”、“红色”）；
});
});
//删除
$（函数（）{
$（删除）。单击（功能（e）{
$（clickedTD.parent（）.html（“”.removeClass（“div”）；
$（“#editHeader”）.css（“显示”、“无”）；
警惕（“这会在清除课堂和课文方面起作用吗？”）；
});
});
函数updateVal（currentEle，value）{
$（currentEle.html（“”）；
$（“.thVal”）.focus（）；
$（“.thVal”）.keyup（函数（事件）{
如果（event.keyCode==13）{
$（currentEle）.html（$（“.thVal”）.val（）.trim（））；
$（“#editHeader”）.css（“显示”、“无”）；
}
});
$（文档）。单击（函数（）{
$（currentEle）.html（$（“.thVal”）.val（）.trim（））；
$（“#editHeader”）.css（“显示”、“无”）；
});
}
//“垃圾桶”
$（函数（）{
var trash=document.getElementById（'trash'）；
$（垃圾箱）。可拖放({
drop：函数（事件、用户界面）{
let removeEl=document.querySelector（'#'+ui.draggable[0].getAttribute（'id'））
removeEl.remove（）；
}
});
});
正文{
字体系列：“Lucida Sans”、“Lucida Sans Regular”、“Lucida Grande”、“Lucida Sans Unicode”、日内瓦、Verdana、无衬线；
}
div{
文本对齐：居中；
边框：1px实心#D3；
宽度：100px；
填充：10px；
光标：移动；
z指数：10；
背景色：#2196F3；
颜色：#fff；
}
.分区{
文本对齐：居中；
填充：10px；
光标：移动；
背景色：#2196F3；
颜色：#fff；
}
.redBG{
文本对齐：居中；
填充：10px；
光标：移动；
背景色：红色；
颜色：#fff；
}
运输署{
边框：1px实心#D3；
填充：10px；
高度：20px；
宽度：200px；
}

答复
双击要编辑的td：

编辑：

编辑文本


编辑颜色：

红色


删除td中的所有内容：

删去

关
这里的问题是您将clickedTD分配给单元格的id，而不是单元格本身：clickedTD=event.target.id

应该是：clickedTD=event.target



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

答复
双击要编辑的td：

编辑：

编辑文本


编辑颜色：

红色


删除td中的所有内容：

删去

关
这里的问题是您将clickedTD分配给单元格的id，而不是单元格本身：clickedTD=event.target.id

应该是：clickedTD=event.target



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

答复
双击要编辑的td：

编辑：

编辑文本


编辑颜色：

红色


删除td中的所有内容：

删去

关