0

I need help with creating table with custom number of rows / columns. I need two input fields for number of rows and columns and after submit table should change dynamically with given numbers of rows / columns. Also, table should be populated with values starting from bottom right cell spiral / in circuit to the left and top until all cells are populated like in this picture (in clockwise direction): http://i.imgur.com/O4GRpND.jpg

What is the best way to this with HTML, AngularJS, jQuery / JavaScript.

Thanks alot.

Improve this question
5
  • Just create a 2D array, with your spriral values, then bind the outer array to the rows, and the inner array to the columns in Angular. You can then add ng-click event to a button to dynamically create the 2D array and populate the values. Commented Sep 29, 2014 at 5:28
  • Not sure how to do that? Can you give an example please? Commented Sep 29, 2014 at 5:31
  • Didj you have any success with this? Commented Jan 23, 2015 at 15:04
  • maybe you should try document.createElement("td") and document.createElement("tr") with part of your solution Commented Oct 22, 2016 at 2:22
  • combined with for (var x=0; x<numCols; x++) and you're pretty much halfway there. Commented Oct 22, 2016 at 2:23

1 Answer 1

Reset to default
1

Basically you can create a controller with the data array

$scope.table = [
    [ 9,10,11,12,13],
    [ 8,21,22,23,14],
    [ 7,20,25,24,15],
    [ 6,19,18,17,16],
    [ 5, 4, 3, 2, 1]
  ];

and then show it using ng-repeat directive on table rows and cols table class="example-animate-container">

<table>
  <tr ng-repeat="row in table">
    <td ng-repeat="col in row">{{col}}</td>
  </tr>
</table>

Then create some input boxes and a button, and have the button call a function than is the 'table generator'

Partial example Here: http://plnkr.co/edit/ikl6WEy7sAOpaelbi1iC?p=preview

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

3 Comments

But what happens when I enter different number of rows&columns and generate table for example 7rows and 8cols? How will values then dynamically populate? I cannot create data array for every possible situation, values should populate dynamically depending on number of rows and columns. Thanks.
You would need to write a function to generate this, it would initialise the table to the correct number of rows/cols, with 0's then loop through each number updating each cell in order.
@cseufert how would you generate the data for insertion, it is not problem to loop and insert data, what is the algorithm for array generetaion?