Question

本代码应该创建一个表并将其转换为画布，这样当我单击一个单元格时，它会将颜色更改为颜色选择器，输入从文本框和颜色选择器中获取并在执行时执行按下提交

我想创建一个具有一定高度和宽度的表格。问题是我不知道如何存储输入框的值创建表。第二个问题是我想要存储颜色选择器中的颜色，以便在我单击它时将单元格颜色更改为它。Photo of the page running。

注意：我只能用JQuery解决这个问题。

// Select color input
// Select size input

// When size is submitted by the user, call makeGrid()
var Make=$('#pixel_canvas');
var td=$('td');

var rows=$('#input_width').val();
var cols=$('#input_height').val();
td.css("padding","700px");
function change() {
    $('td').click( function() {
        $(this).css("background-color","red");
    });
}

Make.append(makeGrid());

function makeGrid() {
    var table='';

    for (var i = 0; i < rows; i++) {
         table+='<tr>';
         for (var j = 0; j < cols; j++) {
             table+='<td onclick="change()"></td>';
         }
         table+='</tr>';
    }
    return 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;
}

table {
    border-collapse: collapse;
    margin: 0 auto;
}

tr {
    height: 20px;
}

td {
    width: 20px;
}

input[type=number] {
    width: 6em;
}

<!DOCTYPE html>
<html>
<head>
    <title>Pixel Art Maker!</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Lab: Pixel Art Maker</h1>

    <h2>Choose Grid Size</h2>
    <form id="sizePicker">
        Grid Height:
        <input type="number" id="input_height" name="height" min="1" value="1">
        Grid Width:
        <input type="number" id="input_width" name="width" min="1" value="1">
        <input type="submit">
    </form>

    <h2>Pick A Color</h2>
    <input type="color" id="colorPicker">

    <h2>Design Canvas</h2>
    <table id="pixel_canvas"></table>

    <script src="designs.js"></script>
</body>
</html>

Answer 1

要动态创建HTML表，您需要在循环中添加行数。你需要它来形成将在你的HTML中添加的字符串。

常见的方法是使用"<table>"启动字符串。然后，您将向该字符串添加行数（通常使用循环），然后您将在循环"</table>"之后添加以结束您的字符串。
但在您的示例中，您的html中已存在table标记，因此无需使用table标记开始或关闭我们的字符串。我们将直接将描述行的字符串附加到选择器$(#pixel_canvas)

然后，如果要在表的td标记上创建侦听器，则可以使用委托事件。这样，您将为整个表添加一个侦听器。基本上，您可以执行以下操作，而不是table+='<td onclick="change()"></td>';：$('#pixel_canvas').on('click', 'td', function(e){})

＆＃13;

let color;

//make the Grid of pixel art
function makeGrid() {
	const table = $('#pixel_canvas');
	table.find('tr').remove(); // will delete existing table if there is

	const size = {
	height: $('#input_height').val(),
	width: $('#input_width').val()
	}

	//Construct the table
	for (let i = 0; i < size.height; i++) {
		let row = '<tr>';
		let cell = '';
		for(let j = 0; j < size.width; j++){
			cell += '<td></td>';
		}
		row += cell;
		row += '</tr>';
		table.append(row);
	}

}

// When size is submitted by the user, call makeGrid()
$('#sizePicker').on('submit', function(e){
	e.preventDefault();
	makeGrid()
})

//change cell color
$('#pixel_canvas').on('click', 'td', function(e){
	if($(e.target).css('background-color') !== color){
		//if color cell different from the selected color with color picker
		color = $('#colorPicker').val();
		$(e.target).css('background-color', color);
		color = $(e.target).css('background-color'); // get the color value in RGB notation
	}else{
		$(e.target).css('background-color', 'inherit');
	}
})

＆＃13;

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;
}

table {
    border-collapse: collapse;
    margin: 0 auto;
}

tr {
    height: 20px;
}

td {
    width: 20px;
}

input[type=number] {
    width: 6em;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title>Pixel Art Maker!</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Lab: Pixel Art Maker</h1>

    <h2>Choose Grid Size</h2>
    <form id="sizePicker">
        Grid Height:
        <input type="number" id="input_height" name="height" min="1" value="1">
        Grid Width:
        <input type="number" id="input_width" name="width" min="1" value="1">
        <input type="submit">
    </form>

    <h2>Pick A Color</h2>
    <input type="color" id="colorPicker">

    <h2>Design Canvas</h2>
    <table id="pixel_canvas"></table>

    <script src="designs.js"></script>
</body>
</html>

＆＃13;

无法使用JQuery创建动态表

1 个答案: