gpt4 book ai didi

javascript - 单击单个单元格并使用 Javascript 为 HTML 表格添加颜色

转载 作者:行者123 更新时间:2023-11-27 23:00:35 24 4
gpt4 key购买 nike

我创建了一个 HTML 表格(包含用户输入的列和行),并且还有一种选择颜色的动态方式。

现在我希望能够单击表格中的各个单元格并使用所选颜色为它们着色。到目前为止我有这段代码。

我的最终目标是能够在我再次点击“提交”时重新设置颜色。流程将是:

  1. 选择表格大小
  2. 选择颜色
  3. 为表格中的单元格着色
  4. 再次点击“提交”重置表格

function makeGrid(ev) {
ev.preventDefault();
var heights = document.getElementById("inputHeight").value;
var widths = document.getElementById("inputWidth").value;
var body = document.getElementById("pixelCanvas");
var table = document.createElement('TABLE')
var tblB = document.createElement('TBODY');
table.appendChild(tblB);
for (var i=0; i<heights; i++){
var tr = document.createElement('TR');
table.appendChild(tr);
for (var j=0; j<widths; j++){
var td = document.createElement('TD')
document.getElementById("pixelCanvas").onclick = function(){
td = document.getElementById("colorPicker").value;
alert(td);
}
table.appendChild(td);
}
}
body.append(table);
body.addEventListener('click', function(){
var coloor = document.getElementById("colorPicker").value;
body.style.backgroundColor = coloor;
})
}
body {
text-align: center;
}

h1 {
font-family: Monoton;
font-size: 70px;
margin: 0.2em;
}

h2 {
margin: 1em 0 0.25em;
}

h2:first-of-type {
margin-top: 0.5em;
}

table,
tr,
td {
border: 1px solid black;
padding: 25px;
}

table {
border-collapse: collapse;
margin: 0 auto;
}

input[type=number] {
width: 6em;
}
<!DOCTYPE html>
<html>
<head>
<title>Pixel Art Maker!</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Pixel Art Maker</h1>

<h2>Choose Grid Size</h2>
<form id="sizePicker" onsubmit="makeGrid(event)">
Grid Height:
<input type="number" id="inputHeight" name="height" min="1" value="1">
Grid Width:
<input type="number" id="inputWidth" name="width" min="1" value="1">
<input type="submit" value= "submit">
</form>

<h2>Pick A Color</h2>
<input type="color" id="colorPicker">

<h2>Design Canvas</h2>
<table id="pixelCanvas"></table>

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

最佳答案

几乎,只有几个变化:

  1. click 错误元素上的事件;只有 td 需要事件。
  2. td 附加到错误的元素。 (tds 应 trs。)
  3. 颜色选择器的值应该通过 HTMLElement.prototype.style 分配给元素的 style 属性(注意:css 属性名称是规范化 [驼峰]).
  4. 我们不应该将table附加到table;考虑将 pixelCanvas 设为 div

注意 this.style... 不是 td.style...;在事件处理程序中,this 引用目标元素。如果您使用 let 关键字来声明 td,您可以使用 td.style...,但是您使用关键字 var:learn more about scope here.

清理表格

清除表格非常简单:删除 pixelCanvas 中的元素(将 pixelCanvas 重置为其原始状态)。这是分两行完成的:

//reset pixelCanvas
while (body.firstChild)
body.removeChild(body.firstChild);

如果您不想向pixelCanvas 添加更多的 child ,您可以将while 更改为if

一起:

function makeGrid(ev) {
ev.preventDefault();

//keep like-statements together
var rows = document.getElementById("inputHeight").value;
var cols = document.getElementById("inputWidth").value;
var table = document.createElement('TABLE');
var body = document.getElementById("pixelCanvas");

//reset pixelCanvas
while (body.firstChild)
body.removeChild(body.firstChild);

for (var i=0; i<rows; i++){
var tr = document.createElement('TR');

for (var j=0; j<cols; j++) {
var td = document.createElement('td');
td.onclick = function() {
this.style.backgroundColor = document.getElementById("colorPicker").value;
};
tr.appendChild(td);
}

table.appendChild(tr);
}

body.append(table);
}
body {
text-align: center;
}

h1 {
font-family: Monoton;
font-size: 70px;
margin: 0.2em;
}

h2 {
margin: 1em 0 0.25em;
}

h2:first-of-type {
margin-top: 0.5em;
}

table,
tr,
td {
border: 1px solid black;
padding: 25px;
}

table {
border-collapse: collapse;
margin: 0 auto;
}

input[type=number] {
width: 6em;
}
<!DOCTYPE html>
<html>
<head>
<title>Pixel Art Maker!</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Pixel Art Maker</h1>

<h2>Choose Grid Size</h2>
<form id="sizePicker" onsubmit="makeGrid(event)">
Grid Height:
<input type="number" id="inputHeight" name="height" min="1" value="1">
Grid Width:
<input type="number" id="inputWidth" name="width" min="1" value="1">
<input type="submit" value= "submit">
</form>

<h2>Pick A Color</h2>
<input type="color" id="colorPicker">

<h2>Design Canvas</h2>
<table id="pixelCanvas"></table>

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

关于javascript - 单击单个单元格并使用 Javascript 为 HTML 表格添加颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52636590/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com