每次點擊按鈕時生成一個新的網格

-1

這是用於生成網格的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"> 
    <button id="Button" type="button">submit</button> 
</form> 
<h2>Design Canvas</h2> 
<table id="pixel_canvas"></table>

這是使用的JavaScript代碼。

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></td>'); 
     } 
     $('#pixel_canvas').append(tr); 
    } 
} 
$('#Button').on('click', makeGrid);

我們該如何解決這個問題？

來源

2017-09-23 Karthik

需要解決什麼問題？你的具體問題和疑問是什麼？ –

另外，發佈所有相關的代碼。 '＃pixel_canvas'在哪裏？ –

另外，你實際上沒有'submit'按鈕（這很好，因爲你實際上沒有提交任何數據）。你有一個「按鈕」按鈕。 –

您使用jQuery append()這確實你說什麼 - 添加新行到現有的元素：在一套匹配

插入內容，由參數指定，每個元素結束元素。

您需要要麼是空的元素追加，甚至更好之前，生成新的內容，比使用jQuery html()方法來設置元素的HTML：

const inputHeight = $('#input_height'); 
const inputWidth = $('#input_width'); 
function makeGrid() { 
    const height = parseInt(inputHeight.val()); 
    const width = parseInt(inputWidth.val()); 
    var newGridHtml = ''; /* Here we generate grid HTML */ 
    for(let row = 0; row < height; row++) { 
     newGridHtml += '<tr>'; 
     for(let cell = 0; cell < width; cell++) { 
      newGridHtml += '<td></td>'; 
     } 
     newGridHtml += '</tr>'; 
    } 
    $('#pixel_canvas').html(newGridHtml); /* No appending here */ 
} 
$('#Button').on('click', makeGrid);

html()做的是：

獲取匹配的元素集合中第一個元素的HTML內容或設置每個匹配元素的HTML內容。

來源

2017-09-23 18:36:58 skobaljic

每次點擊按鈕時生成一個新的網格

回答

相關問題