CODEWITHSUNDEEP
javascriptjqueryhtml
Glen
Glen

Reputation: 45

Dynamic tables printing wrong row and columns in html and jquery

I'm trying to dynamically generate a table on my website but it's giving me the wrong rows(width) and column(height)

For an input of row=1 and column=4 it generates a tables of 2 rows with 1 row of 5 columns and the other with 4 columns 

$("#sizePicker").submit(function(event) {
  var height = event.currentTarget[0].value,
    width = event.currentTarget[1].value;

  console.log(height + "width" + width);

  for (var i = 0; i < height; i++) {
    console.log(i);
    $('#pixelCanvas').append("<tr>");
    for (j = 0; j < width; j++) {
      console.log(j);
      $('tr').append("<td></td>");
    }
    $('#pixelCanvas').append("</tr>");
  }
  event.preventDefault();
});
<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="inputHeight" name="height" min="1" value="1"> Grid Width:
  <input type="number" id="inputWeight" name="width" min="1" value="1">
  <input id="click" type="submit">
</form>
<table id="pixelCanvas">

</table>

Upvotes: 2

Views: 434

Answers (4)

Adam Strzyżewski
Adam Strzyżewski

Reputation: 1

I found the error in your script, this is how the submit function should look like:

$("#sizePicker").submit(function(event) {
 height = parseInt(event.currentTarget[0].value),
 width = parseInt(event.currentTarget[1].value);

 console.log(height + "width" + width);

 for (var i = 0; i < height; i++) 
 {

  if(height>0)
  {
    let tr = $('<tr></tr>');
    for (j = 0; j < width; j++) 
    {
     tr.append("<td></td>");
    }
    $('#pixelCanvas').append(tr);
  }
 }

 event.preventDefault();
});

Upvotes: 0

Krzysztof Janiszewski
Krzysztof Janiszewski

Reputation: 3854

It is happening because you append td to every tr that is in table.

This is wrong

Here is an working example

$("#sizePicker").submit(function(event) {
  var table = $('#pixelCanvas'),
    height = event.currentTarget[0].value,
    width = event.currentTarget[1].value;

  console.log("height: " + height + ", width: " + width);
  
  table.html("");

  for (var i = 0; i < height; i++) {
    table.append("<tr class='row" + i  +"'></tr>");
    
    for (j = 0; j < width; j++) {
      $("tr.row" + i).append("<td>" + i + j + "</td>");
    }
   
  }
  
  event.preventDefault();
});
<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="inputHeight" name="height" min="1" value="4"> Grid Width:
  <input type="number" id="inputWeight" name="width" min="1" value="5">
  <input id="click" type="submit">
</form>
<table id="pixelCanvas">

</table>

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337733

The issue is because you append a new td to every tr that exists in the table, even those created in previous iterations.

You can fix this, and improve the logic, by creating arrays containing the td and tr elements based on the extents specified in the input values. Something like this:

$("#sizePicker").submit(function(e) {
  e.preventDefault();

  var height = parseInt($('#inputHeight').val(), 10);
  var width = parseInt($('#inputWeight').val(), 10);  
  
  var columns = new Array(width).fill('<td></td>').join('');
  var rows = new Array(height).fill(`<tr>${columns}</tr>`);
  
  $('#pixelCanvas').html(rows.join(''));
});
table { 
  margin: 10px;
}
table td {
  padding: 5px 20px;
  border: 1px solid #CCC;
}
<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="inputHeight" name="height" min="1" value="5"><br />
  Grid Width: <input type="number" id="inputWeight" name="width" min="1" value="5"><br />
  <input id="click" type="submit">
</form>
<table id="pixelCanvas"></table>

Upvotes: 1

Kiran Shahi
Kiran Shahi

Reputation: 7970

According to your logic td goes on appending inside every tr as loop goes. So you need to append td to this tr not on all tr inside table. Here is an working example.

$(function() {
$("#click").on('click', function(event) {
    var height  = $('#inputHeight').val();
    var width = $('#inputWeight').val();
    var html = '';
    for (var i=0;i<height;i++)
    {
        html +='<tr>';
        for (j=0;j<width;j++)
        {
            html+= "<td>"+i + '' + j+"</td>";
        }
    html += ("</tr>");
  }
  $('#pixelCanvas').html(html);
});
});
<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="inputHeight" name="height" min="1" value="1">
        Grid Width:
        <input type="number" id="inputWeight" name="width" min="1" value="1">
        <input id="click" type="button" value="submit">
    </form>
 <table id="pixelCanvas">


    </table>

Upvotes: 1

Related Questions