Question

我创建了一个16x16网格。我正在尝试在网格上方放置一个按钮，当用户单击时，会提示他们输入新的网格尺寸（1到64之间）。例如，如果单击按钮并输入25，则网格的尺寸将从16x16更改为25x25。

我无法弄清楚如何将用户的输入转换为javascript函数，因此它会输出更新后的网格。代码在这里：
HTML：

<!doctype html>
<html>

<head>
<title>SketchPad</title>
<link rel="stylesheet" type="text/css" href="style.css" >
</head>

<body>
<h1> SketchPad </h1>

<div id="container">

</div>
<button class="button" type="button" onclick="myFunction()">Choose Your Grid</button>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>        
<script src="jquery.js"></script>
</body>

</html>

CSS：

h1 {
text-align: center;
color: black;
}
tr, td, table {
border-style: solid;
border-width: 1px;
background-color: gray;
margin: auto;
height: 25px;
width: 525px;
margin-top: 20px;
}
td {
transition: .3s background-color;
}
td:hover {
background-color: red;
}
button {
height: 25px;
width: 225px;
margin: 0 auto;
position: relative;
top: 50%;
left: 40%;
margin-top: -40px;
}

使用Javascript：

var rows=16;
var cols=16;       

document.write("<table>");
for (i=0; i<rows; i++) {
document.write("<tr>");
  for (j=0; j<cols; j++) {
    document.write("<td>"+"</td>");
  }
document.write("</tr>");
}
document.write("</table>");

$( "td").css("color", "red");

$(".button").click(function() {
prompt("Please select your grid size");
});

function grid(rows, cols) {
//function goes here//
}

Answer 1

尝试以下内容。

编写一个清空容器的函数，并在其中重绘网格。
在document.ready()处理中初始化您的网格。
为按钮单击定义事件处理程序，提示以用户定义的大小重绘网格。

$(document).ready(function() {
  grid(16,16);
});

$(".button").click(function() {
  var size = prompt("Please select your grid size");
  grid(size, size);
});

function grid(rows, cols) {
  var table = "<table>";
  var size = (1 / rows * 525) + "px";
  
  for (i=0; i<rows; i++) {
    table += "<tr>";
    for (j=0; j<cols; j++) {
      table += "<td>"+"</td>";
    }
    table += "</tr>";
  }
  table += "</table>";
  
  $("#container").empty().append(table);
  $("tr").css("height", size);
  $("td").css("color", "red").css("width", size);
}

h1 {
  text-align: center;
  color: black;
}
table {
  height: 525px;
  width: 525px;
}
tr, td, table {
  border-style: solid;
  border-width: 1px;
  background-color: gray;
  margin: auto;
  margin-top: 20px;
}
td {
  transition: .3s background-color;
}
td:hover {
  background-color: red;
}
button {
  height: 25px;
  width: 225px;
  margin: 0 auto;
  position: relative;
  top: 50%;
  left: 40%;
  margin-top: -40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1> SketchPad </h1>

<div id="container">
</div>

<button class="button" type="button">Choose Your Grid</button>

如何使用JS制作更改网格尺寸的按钮？

1 个答案: