如何循环遍历 html 中的表格并使用 javascript 迭代它们的值
[英]how to loop over a table in html and iterate their values using javascript
问题描述
I'm building a grid (20 rows and 20 columns ( of squares) ) but struggling with looping on table values to actually make the grid
我正在构建一个网格（20 行和 20 列（正方形））但正在努力循环表值以实际制作网格
I provided more info on the html code..我提供了有关 html 代码的更多信息..
The pictures are provided on the comments图片在评论中提供
<body>
<h1>Pixel Art Maker</h1>
<h2>Choose Grid Size</h2>
<form id="sizePicker">
Grid Height: <!--- Creating input element to input height --->
<input type="number" id="inputHeight" name="height" min="1" value="1">
Grid Width: <!--- Creating input element to input width --->
<input type="number" id="inputWidth" name="width" min="1" value="1">
<input type="submit">
</form>
<h2>Pick A Color</h2>
<input type="color" id="colorPicker"> <!--- Creating imput element to input a certain color --->
<h2>Design Canvas</h2>
<table id="pixelCanvas"> <tr> <td> </td> </tr> </table>
<!--- Creating the table --->
<script src="designs.js"></script>
</body>
table,
tr,
td {
border: 1px solid black;
}
tr {
height: 20px; //some how this is working as it's the same as
//td when i edit it the td gets edited aswell
width: 20px;
}
td {
height: 20px; //same as here
width: 20px;
}
const lTable = document.querySelector("pixelCanvas");
//Selecting my table and storing it in a variable
let height = document.querySelector("#inputHeight");
//Storing the value on the input height element
let width = document.querySelector("#inputWidth");
//Storing the value of the input width element
function makeGrid() {
//This is the main problem i can't figure out how to iterate the value
// to make the actual grid and give it the event listener
}
2 个解决方案
解决方案1
0 已采纳 2019-07-29 16:44:04
you do not need a form for this unless you want to submit data to a API.除非您想向 API 提交数据，否则您不需要为此提供表单。
find a minimal solution for your problem here:在这里为您的问题找到一个最小的解决方案：
function makeGrid() { let height = document.querySelector("#inputHeight").value; //Storing the value on the input height element let width = document.querySelector("#inputWidth").value; //Storing the value of the input width element //Selecting my table and storing it in a variable const lTable = document.querySelector("#pixelCanvas"); //This is the main problem i can't figure out how to iterate the value // to make the actual grid and give it the event listener for (var i=0; i< height;i++) { var row = lTable.insertRow(i); for (var j=0; j< width;j++) { row.insertCell(j); } } }
table { border: 1px solid black; } table td { border: 1px solid black; height: 20px; width: 20px; }
<div> <label for="inputHeight">Height</label> <input type="text" id="inputHeight" value="0"/> </div> <div> <label for="inputWidth">Width</label> <input type="text" id="inputWidth" value="0"/> </div> <input type="submit" value="Draw" onClick="makeGrid()"></input> <table id="pixelCanvas"></table>
解决方案2
0 2019-07-29 16:53:59
A fiddle that may help you:一个可以帮助你的小提琴：
https://jsfiddle.net/qh6zjfmw/ https://jsfiddle.net/qh6zjfmw/
Here the function, every cell have data-row and data-col that help you to understand the clicked element, and every cell have .row-number and .col-number to target the correct element to change the class (active/inactive)这里的函数，每个单元格都有 data-row 和 data-col 来帮助你理解点击的元素，每个单元格都有 .row-number 和 .col-number 来定位正确的元素来改变类（活动/非活动）
makegrid(13,13);
function makegrid(rows, cols){
for (var r = 0; r < rows; r++){
console.log(r+1);
$('<div class="row row-'+r+'"></div>').appendTo(".grid");
for (var c = 0; c < cols; c++){
console.log(c+1);
$('<div class="col col-'+c+'" style="width:'+100/cols+'%; padding-bottom:'+100/cols+'%" data-row="'+r+'" data-col="'+c+'"></div>').appendTo(".grid .row-"+r);
}
}
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.