RedGhoul/Tables.html

## Tables.html
<!DOCTYPE html>
<html>
  <head>
    <title>Dynamic Table</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
      $(document).ready(function() {
        var data = {
          ALL: [
            'SUPER_R:EditPages',
            'SUPER_R:MergePages',
            'SUPER_R:ViewPages',
            'SUPER_R:DeletePages',
          ],
          SUPER_R: ['SUPER_R:ViewPages', 'SUPER_R:EditPages'],
          ADMIN_R: [
            'SUPER_R:ViewPages',
            'SUPER_R:EditPages',
            'SUPER_R:DeletePages',
            'SUPER_R:MergePages',
          ],
          CSR_R: ['SUPER_R:ViewPages', 'SUPER_R:EditPages'],
          ROLES: ['SUPER_R', 'ADMIN_R', 'CSR_R'],
        };

        var start = '<tr>';
        var end = '</tr>';
        var header = '';

        data.ALL.forEach(element => {
          header = header + '<th>' + element + '</th>';
        });

        $('thead').append(start + '<th></th>' + header + end);

        var body = '';
        var leftMade = false;
        for (let index = 0; index < data.ROLES.length; index++) {
          const elementROLE = data.ROLES[index];
          console.log('ROLE: ' + elementROLE);
          body = body + '<td>' + elementROLE + '</td>';
          for (let index = 0; index < data.ALL.length; index++) {
            const element = data.ALL[index];
            console.log('ELE: ' + index + ' ' + element);

            if (data[elementROLE].includes(element)) {
              body =
                body +
                '<td>' +
                '<input type="checkbox" id="scales" name="scale" checked>' +
                '</td>';
            } else {
              body =
                body +
                '<td>' +
                '<input type="checkbox" id="scales" name="scale" >' +
                '</td>';
            }
          }
          $('tbody').append(start + body + end);
          body = '';
        }

        // for (const key in data) {
        //   if (key !== 'ALL') {
        //     body = body + '<td>' + key + '</td>';
        //     for (let index = 0; index < data[key].length; index++) {
        //       body = body + '<td>' + data[key][index] + '</td>';
        //     }
        //     $('tbody').append(start + body + end);
        //     body = '';
        //   }
        // }
      });
    </script>
  </head>
  <body>
    <div style="margin-top: 50px; margin-left: 250px">
      Number of Rows:<input type="text" id="rows" /> Number of Coloumn:
      <input type="text" id="cols" />
      <button>Create Table</button>
      <form method="POST">
        <table>
          <thead></thead>
          <tbody></tbody>
        </table>
        <button type="submit">SUBMIT</button>
      </form>
    </div>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Dynamic Table</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script>
	$(document).ready(function() {
	var data = {
	ALL: [
	'SUPER_R:EditPages',
	'SUPER_R:MergePages',
	'SUPER_R:ViewPages',
	'SUPER_R:DeletePages',
	],
	SUPER_R: ['SUPER_R:ViewPages', 'SUPER_R:EditPages'],
	ADMIN_R: [
	'SUPER_R:ViewPages',
	'SUPER_R:EditPages',
	'SUPER_R:DeletePages',
	'SUPER_R:MergePages',
	],
	CSR_R: ['SUPER_R:ViewPages', 'SUPER_R:EditPages'],
	ROLES: ['SUPER_R', 'ADMIN_R', 'CSR_R'],
	};

	var start = '<tr>';
	var end = '</tr>';
	var header = '';

	data.ALL.forEach(element => {
	header = header + '<th>' + element + '</th>';
	});

	$('thead').append(start + '<th></th>' + header + end);

	var body = '';
	var leftMade = false;
	for (let index = 0; index < data.ROLES.length; index++) {
	const elementROLE = data.ROLES[index];
	console.log('ROLE: ' + elementROLE);
	body = body + '<td>' + elementROLE + '</td>';
	for (let index = 0; index < data.ALL.length; index++) {
	const element = data.ALL[index];
	console.log('ELE: ' + index + ' ' + element);

	if (data[elementROLE].includes(element)) {
	body =
	body +
	'<td>' +
	'<input type="checkbox" id="scales" name="scale" checked>' +
	'</td>';
	} else {
	body =
	body +
	'<td>' +
	'<input type="checkbox" id="scales" name="scale" >' +
	'</td>';
	}
	}
	$('tbody').append(start + body + end);
	body = '';
	}

	// for (const key in data) {
	// if (key !== 'ALL') {
	// body = body + '<td>' + key + '</td>';
	// for (let index = 0; index < data[key].length; index++) {
	// body = body + '<td>' + data[key][index] + '</td>';
	// }
	// $('tbody').append(start + body + end);
	// body = '';
	// }
	// }
	});
	</script>
	</head>
	<body>
	<div style="margin-top: 50px; margin-left: 250px">
	Number of Rows:<input type="text" id="rows" /> Number of Coloumn:
	<input type="text" id="cols" />
	<button>Create Table</button>
	<form method="POST">
	<table>
	<thead></thead>
	<tbody></tbody>
	</table>
	<button type="submit">SUBMIT</button>
	</form>
	</div>
	</body>
	</html>