How to create a table using user input with Javascript/JQuery

Question

I'm trying to create a table using a user input prompt which is saved into a variable. I want to be able to take that variable and make it an even number of rows and columns. So for example if the user input is 5, I want to make a 5x5 table.

I'm able to take the user's input and make the correct amount of rows, but I'm having trouble with the columns.

Could anyone offer some insight on my code? My js fiddle is below:

$(document).ready(function() {
    //cache all jquery objects in variables
    var $button = $('.button');
    var $wrapper = $('.wrapper');
    var $bones = $('.bones');
    var $rows = $('.rows');

    $button.click(function() {

        //prompt user for input on table size
        var inp = prompt("Enter a number");

        for (var i = 0; i < inp; i++) {
            $bones.append("<tr class='rows'></tr>");
            $rows.append("<td class='block'></td>");
        };
    });

});

https://jsfiddle.net/81zv9zjs/

Ben · Accepted Answer · 2016-06-25 15:19:40Z

2

You need to append the td element within the tr elements, so instead of a single loop like the one you have, try:

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

  var elem = $("<tr class='rows'></tr>");

  for (var j = 0; j < inp; j++) {
    elem.append("<td class='block'></td>");
  }

  $bones.append(elem);

};

answered Jun 25, 2016 at 15:19

Ben

9898 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

cssyphus · Accepted Answer · 2016-06-25 15:39:08Z

0

Something like this should get you started:

$(document).ready(function() {
  //cache all jquery objects in variables
  var $button = $('.button');
  var $bones = $('.bones');

  $button.click(function() {
    //prompt user for input on table size
    var rr = prompt("Rows");
    var cc = prompt("Cols");

    for (var i = 0; i < rr; i++) {
      var row = $('<tr class="rows"></tr>');
      for (var j = 0; j < cc; j++) {
        row.append('<td width="20">&nbsp;</td>');
      }
      $bones.append(row);
    }
  });

});

table {width: 100%;border-collapse: collapse;}
th,td {border: 2px solid #ccc;}

.button {
  text-align: center;
  text-decoration: none;
  display: block;
  padding: 20px;
  width: 100px;
  margin: 0 auto;
  margin-bottom: 10px;
  background-color: black;
  color: white;
}
.wrapper {
  height: 300px;
  width: 300px;
  background-color: red;
  margin: 0 auto;
}
.block {
  background-color: white;
  height: 20px;
  width: 20px;
  padding: 10px;
  border: solid 0.1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<a href="#" class="button"> Click Here! </a>

<div class='wrapper'>
  <table class="bones"></table>
</div>

answered Jun 25, 2016 at 15:39

cssyphus

40.4k20 gold badges104 silver badges125 bronze badges

2 Comments

sharif2008 Over a year ago

what is difference from the previous ans?

cssyphus Over a year ago

Ha! Looks like Ben copied my answer exactly -- and he managed to do it 20 minutes before I even posted mine. Shows what happens when you walk away from the computer in the middle of answering a question... Ben should be awarded the accepted answer, but I'll leave mine here only because it has a demo. +1 to Ben.

Redu · Accepted Answer · 2016-06-25 16:27:54Z

Lets have a wider approach. Assuming that you have to create a table with some data in it. That data has to be provided in an object structure in a similar fashion to the following;

[ { Prop_0: 'Value_0',
    Prop_1: 'Value_1',
    Prop_2: 'Value_2',
    Prop_3: 'Value_3',
    Prop_4: 'Value_4' },
  { Prop_0: 'Value_5',
    Prop_1: 'Value_6',
    Prop_2: 'Value_7',
    Prop_3: 'Value_8',
    Prop_4: 'Value_9' },
  { Prop_0: 'Value_10',
    Prop_1: 'Value_11',
    Prop_2: 'Value_12',
    Prop_3: 'Value_13',
    Prop_4: 'Value_14' },
  { Prop_0: 'Value_15',
    Prop_1: 'Value_16',
    Prop_2: 'Value_17',
    Prop_3: 'Value_18',
    Prop_4: 'Value_19' },
  { Prop_0: 'Value_20',
    Prop_1: 'Value_21',
    Prop_2: 'Value_22',
    Prop_3: 'Value_23',
    Prop_4: 'Value_24' } ]

In which the properties will designate the headers and the values are the <td> cell values. tableMaker will take this object as first argument and turn it into a table HTML mark up text. If the second argument is true then the first object's properties will be used for <th> data. So lets see...

function tableMaker(o,h) {
  var keys = o.length && Object.keys(o[0]),
  rowMaker = (a,t) => a.reduce((p,c,i,a) => p + (i === a.length-1 ? "<" + t + ">" + c + "</" + t + "></tr>"
                                                                  : "<" + t + ">" + c + "</" + t + ">"),"<tr>"),
  rows = o.reduce((r,c) => r + rowMaker(keys.reduce((v,k) => v.concat(c[k]),[]),"td"),h ? rowMaker(keys,"th") : []);
  return rows.length ? "<table>" + rows + "</table>" : "";
}

var data = [{"Prop_0":"Value_0","Prop_1":"Value_1","Prop_2":"Value_2","Prop_3":"Value_3","Prop_4":"Value_4"},{"Prop_0":"Value_5","Prop_1":"Value_6","Prop_2":"Value_7","Prop_3":"Value_8","Prop_4":"Value_9"},{"Prop_0":"Value_10","Prop_1":"Value_11","Prop_2":"Value_12","Prop_3":"Value_13","Prop_4":"Value_14"},{"Prop_0":"Value_15","Prop_1":"Value_16","Prop_2":"Value_17","Prop_3":"Value_18","Prop_4":"Value_19"},{"Prop_0":"Value_20","Prop_1":"Value_21","Prop_2":"Value_22","Prop_3":"Value_23","Prop_4":"Value_24"}],
tableHTMLText = tableMaker(data,true);

document.write(tableHTMLText);
console.log(tableHTMLText);

I hope it helps.

Collectives™ on Stack Overflow

How to create a table using user input with Javascript/JQuery

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related