我有一个带有表的程序，如果你双击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");
});
});
但这不会改变双击的CCD_ 5的背景。我做错了什么？
完整代码片段
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>
这里的问题是，您将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();
}
});
});
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;
}
<!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>