Angular Table - Public

<!DOCTYPE html>
<html>

  <head>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <script type="text/javascript">
  $(document).ready(function(){
   /* $("p").click(function(){
        $('p').hide();
        $('body').append("<p>hidden text</p>");
    });*/
    
   /*$('#submit').click(function(){
      writeFunction($('#inputName').val());
    });*/
    
  $('#activate').ready(function(){
        $.each(obj64VIA_A3.rel_crit_table, function(key, value){
         //$("<th>" + key + "</th>").insertAfter('#tableHeader');
          myArray=value;
          for (i = value.length-1; i >-1; i--) { 
            $("<td>" + value[i] + "</td>").insertAfter('#tableBody');
          };
        });
      $("<td>" + obj64VIA_A3.process_name + "</td>" ).insertAfter('#tableBody');
  });
});
	  </script>
  </head>

  <body>
  
  <table>
  <tr id="tableHeader"><th width='15%'>Target Level</th><th width='15%'>Target Traveler</th><th width='5%'>Target Type</th><th width='5%'>RDA sample</th><th colspan='4'>Target Releases Following Levels</th></tr>
  <tr id="tableBody"></tr>
  </table>
  <!--<form><input id="inputName"></form><button id="submit">submit</button>-->
  
  <!--Submission-->
  <p>Enter names in the fields, then click "Submit" to submit the form:</p>

<div ng-app="">
  <p>Process Name: <input type="text" ng-model="process_name"></p>
  <p>Target traveler: <input type="text" ng-model="target_traveler"></p>
  <p>RDA Sample: <input type="text" ng-model="rda_sample"></p>
  <p>Target Type: <input type="text" ng-model="target_type"></p>
  <p>Target Type: <input type="text" ng-model="target_type"></p>
  <p>Target Release: <input type="text" ng-model="target_release1"><input type="text" ng-model="target_release2"><input type="text" ng-model="target_release3"><input type="text" ng-model="target_release4"></p>
  
  <table>
  <tr id="tableHeader"><th width='15%'>Target Level</th><th width='15%'>Target Traveler</th><th width='5%'>Target Type</th><th width='5%'>RDA sample</th><th colspan='4'>Target Releases Following Levels</th></tr>
  <tr>
    <td ng-bind="process_name"></td><td>{{target_traveler}}</td><td>{{target_type}}</td><td>{{rda_sample}}</td><td>{{level_release1}}</td><td>{{level_release2}}</td><td> </td><td> </td>
  </tr>
  </table>
</div>


  </body>

</html>

function writeFunction(value) {
	    	obj64VIA_A3.short_name = value;
	    	}

var rel_crit_header= "<th width='15%'>Target Level</th><th width='15%'>Target Traveler</th><th width='5%'>Target Type</th><th width='5%'>RDA sample</th><th colspan='4'>Target Releases Following Levels</th>";

var obj64VIA_A3 = {
	short_name:"64 VIA Int (A3)",
	process_name:"1234 - VIA INTEGRATED DRY ETCH (A3)",
	traveler_link: [],
	critical_metrics: ["1234- VIA INTEGRATED DRY STRIP CLN SEM CD"],
	
	rel_crit_table: {
		level_release:["12 VIA*", "34 VIA", " ", " "],
		rda_sample: ["no rda"],
		target_type:["wafers"],
		
		target_traveler: ["1234traveler"],
	},
	
	change_param1: {
		measurement_traveler: "1234- VIA INTEGRATED DRY STRIP CLN SEM CD",
		tool_type: "toolset",
		notes: "various instruction"
	},
	
	change_param2: {
		recipe_name:"1234recipe",
		measurement_parameter:"1234CDs",
		changeable_parameter:"1234RPAs",
		step_number:"1,2, 3, 4",
		limits:"12-34 C",
		max_increment:"12° C",
		delta_move:"43A/°C"
	}
};

/* Styles go here */
body {
			background-color: #ffffff;
			margin: 0px;
			padding: 0px;
			font-family: tahoma, verdana, arial, helvetica, sans-serif;
			font-size: 18px;
			color: #444444;
		}

		.alert {
			color: #ff0000;
		}
		
		.fa {
			display: inline;
			vertical-align: middle;
			font-size: 20px;
			padding-right: 15px;

		}
		
		.collapse > h3 {
			cursor: pointer;
		}
		
		.collapse > h2 {
			cursor: pointer;
		}
		
		.wrapper {
			margin-left: 50px;
			border-style: solid;
			width:85%;
			padding: 10px;
		}
		
		.hidden {
			display: none;
		}
		
		.table {
			background-color: #DDA0DD;
			width: 80%; 
			border: solid;
		}
		
		img {
			display: block;
			text-align:center;
			margin: 5px 5px 5px 5px;
			padding-left: 5%;
			padding-right: 5%;
			max-width: 90%;
			height: auto;

		}
		
		h2 {
			margin-top: 30px;
			background-color: #5c5c8a;
			color: #e6e6e6;
			font-size: 24px;
			font-weight: bold;
			padding-left: 10px;
		}
		
		h3 {
			margin-top: 24px;
			background-color: #9494b8;
			color: #f2f2f2;
			width: 90%;
			font-size: 18px;
			font-weight: bold;
			margin-left:30px;
			border-radius: 25px;
			padding-left: 5px;

		}
		

		
		table {
			border: 1px solid black;
			width: 100%;
			border-collapse: collapse;
		}
		
		th, td {
			border: solid black;
			text-align:center;
			font-size: 16px;
			padding: 10px;
			color: #000000;
		}

		
		th {
			height: auto;
			color:#000000;
			background-color: #4da6ff;
		}
	
    td:nth-last-child(-n+4) {
      background-color: #FFD700;
    }	
    
		ul {
			list-style-type: square;
		}
		
		ul ul {
			list-style-type: none
		}
		
		ol ol {
			list-style-type: none
		}		
		
		blockquote {
			margin: 15px 30px 15px 10px;
			padding-left: 20px;
			border-left: 5px solid #C8D0CA;
		}
		
	
		
		#header {
			height: 110px;
			margin: 0px 0px 0px 0px;
			padding: 0;
			background: #9494b8; 
			border-bottom: 10px solid #C8D0CA;
		}
		
		#headercontent {
			width: 785px;
			text-align: left;
			padding-left: 30px;
			padding-right: 7px;
			padding-top: 28px;
			padding-bottom: 40px;
			margin-top: 0px; 
			margin-bottom: 0px; 	
		}
		
				
		#title {
			text-align: left;
		}
		
		#title h1 {
			letter-spacing: -1px;
			color: #ffffff;
			font-size: 48px;
			font-weight: bold;
			margin: 0;
			padding: 0;
		}
		
		#title h1 a, #title h1 a:visited, #title h1 a:active, 			#title h1 a:hover {
			letter-spacing: -1px;
			color: #ffffff;
			font-size: 32px;
			font-weight: bold;
			margin: 0;
			padding: 0;
			text-decoration: none;
		}
		
		#title p {
			margin-top: 0px;
			text-align: left;
			font-size: 18px;
			color: #F1F3F2;
		}

<html>

  <head>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <script type="text/javascript">
  
	  </script>
  </head>

  <body>
   <p>[obj64VIA_A3.short_name]</p>
  </body>

</html>


var obj64VIA_A3 = {
	short_name:"64 VIA Int (A3)",
	process_name:"1234 - VIA INTEGRATED DRY ETCH (A3)",
	traveler_link: [],
	critical_metrics: ["1234- VIA INTEGRATED DRY STRIP CLN SEM CD"],
	
	rel_crit_table: {
		level_release:["12 VIA*", "34 VIA", " ", " "],
		rda_sample: ["no rda"],
		target_type:["wafers"],
		
		target_traveler: ["1234traveler"],
	},
	
	change_param1: {
		measurement_traveler: "1234- VIA INTEGRATED DRY STRIP CLN SEM CD",
		tool_type: "toolset",
		notes: "various instruction"
	},
	
	change_param2: {
		recipe_name:"1234recipe",
		measurement_parameter:"1234CDs",
		changeable_parameter:"1234RPAs",
		step_number:"1,2, 3, 4",
		limits:"12-34 C",
		max_increment:"12° C",
		delta_move:"43A/°C"
	}
};

<!DOCTYPE html>
<html>

  <head>
   
  </head>

  <body>
  
  <div ng-app="">
    <p>Process Name: <input type="text" ng-model="process_name"></p>
    <p>Target traveler: <input type="text" ng-model="target_traveler"></p>
    <p>RDA Sample: <input type="text" ng-model="rda_sample"></p>
    <p>Target Type: <input type="text" ng-model="target_type"></p>
    <p>Target Type: <input type="text" ng-model="target_type"></p>
    <p>Target Release: <input type="text" ng-model="target_release1"><input type="text" ng-model="target_release2"><input type="text" ng-model="target_release3"><input type="text" ng-model="target_release4"></p>
    
    <table>
    <tr id="tableHeader"><th width='15%'>Target Level</th><th width='15%'>Target Traveler</th><th width='5%'>Target Type</th><th width='5%'>RDA sample</th><th colspan='4'>Target Releases Following Levels</th></tr>
    <tr>
      <td ng-bind="process_name"></td><td>{{target_traveler}}</td><td>{{target_type}}</td><td>{{rda_sample}}</td><td>{{level_release1}}</td><td>{{level_release2}}</td><td> </td><td> </td>
    </tr>
    </table>
  </div>


  </body>

</html>