在javascript中使用输入标签中的数据html

Question

我想在html中使用输入标签中的数据。 html代码如下所示。

<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"> 

从输入变量的数据值应该在JavaScript代码如下所示使用：

function makeGrid() { 
    for(let td_row=0; td_row < 6; td_row++){ 
    $(<tr></tr>).appendTo(<table id="pixel_canvas"></table>); 
for(let td_cell =0; td_cell < 6; td_cell++){ 
     $(<td></td>).appendTo(<tr></tr>); 
    } 
    } 

有人可以请帮我在这？

Answer 1

试试这个解决方案。从输入中获取值并将它们设置为循环中条件的范围。然后在第一个循环中添加您的创建tr，在第二个循环中添加td。毕竟追加tr with tds到表中。

const table = $('#pixel_canvas'); 
 
const inputHeight = $('#input_height'); 
 
const inputWidth = $('#input_width'); 
 

 
function makeGrid() { 
 

 
    const height = parseInt(inputHeight.val()); 
 
    const width = parseInt(inputWidth.val()); 
 

 
    for(let row = 0; row < height; row++) { 
 
    
 
    const tr = $('<tr></tr>'); 
 
    
 
    for(let cell = 0; cell < width; cell++) { 
 
     tr.append(`<td>${row}${cell}</td>`); 
 
    } 
 
    
 
    table.append(tr); 
 
    } 
 
} 
 
    
 
$('#submitBtn').on('click', makeGrid);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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"> 
 
<button id="submitBtn" type="button">Generate</button> 
 

 
<table id="pixel_canvas"> 
 

 
</table>

Answer 2

您需要使用字符串，创建HTML元素时（例如$（ ''））而不是原始标记。我更新了问题中的函数，以便它创建一个表并返回它。您只需将其插入任何需要的地方。

function makeGrid() { 
    var rowsCount = ParseInt($('#input_height').val()) || 0; 
    var columnsCount = ParseInt($('#input_width).val()) || 0; 
    var table = $('<table id="pixel_canvas"></table>'); 

    for(let td_row = 0; td_row < rowsCount; td_row++){ 

    var tr = $('<tr></tr>').appendTo(table); 

    for(let td_cell = 0; td_cell < columnsCount; td_cell++){ 
     $('<td></td>').appendTo(tr); 
    } 

    } 
    return table; 
}