javascriptのhtmlのinputタグからデータを使用するには

Question

htmlのinputタグからデータを使いたいと思います。 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を追加し、2番目のループにtdを追加します。すべての後にtr with tdsをテーブルに追加します。代わりに、生のマークアップのあなたが（例えば、$（ ''））HTML要素を作成する際に、文字列を使用する必要が

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

。質問から関数を更新し、テーブルを作成して返すようにしました。必要な場所に挿入するだけです。

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; 
}