mrcampbell · October 6, 2016 22:25
diff --git a/forMark.html b/forMark.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title></title>
    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        #output {
            border-collapse: collapse;
            margin: 10px;
        }

        #output td, #output th {
            border: 1px solid black;
            padding: 5px;
            min-width: 10em;
        }

    </style>
 </head>
 <body>

 <div class="container">
    <div class="row">
        <table id="output" class="table-striped">
        <tr><th>ID</th><th>Generated</th><th>Adjustment</th><th>Final</th></tr>
        </table>
        <button onclick="saveOutput()" class="btn btn-primary">Save</button>
    </div>
 </div>

 <script>

    /**
     * 
     * @param rownum - while looping through, pass it an index.  Careful, this HAS to start at 1 and increment
     *                    by 1
     * @param generated - this is what the system gave you.  May not be correct.  
     */
    function fillTable(rownum, generated) {

        // http://www.w3schools.com/jsref/met_table_insertrow.asp
        var table = document.getElementById('output');

        // make row
        var row = table.insertRow(rownum);

        // this is so we can alter the final value on update.
        // we can select the child cell of this row easily.
        row.setAttribute("id", "row-" + rownum);

        // fill it with cells
        var rownumCell     = row.insertCell(0);
        var generatedCell  = row.insertCell(1);
        var dropDownCell   = row.insertCell(2);
        var finalCell      = row.insertCell(3);

        // these cell IDs we'll use later, so instead of regenerating it
        // lets declare them once and reference them later
        var rowIdCellStr     = "rowNumCell-"    + rownum;
        var generatedCellStr = "generatedCell-" + rownum;
        var dropDownCellStr  = "dropDownCell-"  + rownum;
        var finalCellStr     = "finalCell-"     + rownum;
        var dropDownIdStr    = "dropDown-"      + rownum;

        // this doesn't have to be in the function, but I wanted to show you the template
        // function.. it might come in handy, so I inefficiently put it here for your viewing pleasure.
        var dropdown = `<select id="${dropDownIdStr}">
            <option value="BLANK"></option>
            <option value="DRESS-W">Dress W</option>
            <option value="DRESS-X">Dress X</option>
            <option value="DRESS-Y">Dress Y</option>
            <option value="DRESS-Z">Dress Z</option>
            </select>`;

        
        // fill the cells with data and assign IDs
        rownumCell.innerHTML = rownum;
        rownumCell.setAttribute("id", rowIdCellStr);

        generatedCell.innerHTML = generated;
        generatedCell.setAttribute("id", generatedCellStr);

        dropDownCell.innerHTML = dropdown;
        dropDownCell.setAttribute("id", dropDownCellStr);

        // default value
        finalCell.innerHTML = generated;
        finalCell.setAttribute("id", finalCellStr);

        
        // when the user changes the drop down, overwrite the final value to match
        // what they selected, and then change the background by adding a Bootstrap class
        // so we have visual feedback that something has changed.
        $("#" + dropDownIdStr).change(function() {
            var str = $("#" + dropDownIdStr + " option:selected").text();
            console.log(str);
            console.log("#" + finalCellStr);
            $("#" + finalCellStr).html(str).addClass("bg-success");
        });
    }

    // THIS IS WHERE YOU SAVE IT TO FILE, 
    // I just printed it to the console to make things easier.
    function saveOutput() {
        var output = [];

        var length = $("#output").find("tr").length;
        for (var i =0; i < length; i++) {

            var finalValue = $("#" + "finalCell-" + i).text();

            console.log(i + " : " + finalValue);
        }

    }

    // basic, fake data
    fillTable(1, "Dress X");
    fillTable(2, "Dress J");
    fillTable(3, "Dress K");


 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title></title>
	<head>
	<title>Bootstrap Example</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<style>
	#output {
	border-collapse: collapse;
	margin: 10px;
	}

	#output td, #output th {
	border: 1px solid black;
	padding: 5px;
	min-width: 10em;
	}

	</style>
	</head>
	<body>

	<div class="container">
	<div class="row">
	<table id="output" class="table-striped">
	<tr><th>ID</th><th>Generated</th><th>Adjustment</th><th>Final</th></tr>
	</table>
	<button onclick="saveOutput()" class="btn btn-primary">Save</button>
	</div>
	</div>

	<script>

	/**
	*
	* @param rownum - while looping through, pass it an index. Careful, this HAS to start at 1 and increment
	* by 1
	* @param generated - this is what the system gave you. May not be correct.
	*/
	function fillTable(rownum, generated) {

	// http://www.w3schools.com/jsref/met_table_insertrow.asp
	var table = document.getElementById('output');

	// make row
	var row = table.insertRow(rownum);

	// this is so we can alter the final value on update.
	// we can select the child cell of this row easily.
	row.setAttribute("id", "row-" + rownum);

	// fill it with cells
	var rownumCell = row.insertCell(0);
	var generatedCell = row.insertCell(1);
	var dropDownCell = row.insertCell(2);
	var finalCell = row.insertCell(3);

	// these cell IDs we'll use later, so instead of regenerating it
	// lets declare them once and reference them later
	var rowIdCellStr = "rowNumCell-" + rownum;
	var generatedCellStr = "generatedCell-" + rownum;
	var dropDownCellStr = "dropDownCell-" + rownum;
	var finalCellStr = "finalCell-" + rownum;
	var dropDownIdStr = "dropDown-" + rownum;

	// this doesn't have to be in the function, but I wanted to show you the template
	// function.. it might come in handy, so I inefficiently put it here for your viewing pleasure.
	var dropdown = `<select id="${dropDownIdStr}">
	<option value="BLANK"></option>
	<option value="DRESS-W">Dress W</option>
	<option value="DRESS-X">Dress X</option>
	<option value="DRESS-Y">Dress Y</option>
	<option value="DRESS-Z">Dress Z</option>
	</select>`;


	// fill the cells with data and assign IDs
	rownumCell.innerHTML = rownum;
	rownumCell.setAttribute("id", rowIdCellStr);

	generatedCell.innerHTML = generated;
	generatedCell.setAttribute("id", generatedCellStr);

	dropDownCell.innerHTML = dropdown;
	dropDownCell.setAttribute("id", dropDownCellStr);

	// default value
	finalCell.innerHTML = generated;
	finalCell.setAttribute("id", finalCellStr);


	// when the user changes the drop down, overwrite the final value to match
	// what they selected, and then change the background by adding a Bootstrap class
	// so we have visual feedback that something has changed.
	$("#" + dropDownIdStr).change(function() {
	var str = $("#" + dropDownIdStr + " option:selected").text();
	console.log(str);
	console.log("#" + finalCellStr);
	$("#" + finalCellStr).html(str).addClass("bg-success");
	});
	}

	// THIS IS WHERE YOU SAVE IT TO FILE,
	// I just printed it to the console to make things easier.
	function saveOutput() {
	var output = [];

	var length = $("#output").find("tr").length;
	for (var i =0; i < length; i++) {

	var finalValue = $("#" + "finalCell-" + i).text();

	console.log(i + " : " + finalValue);
	}

	}

	// basic, fake data
	fillTable(1, "Dress X");
	fillTable(2, "Dress J");
	fillTable(3, "Dress K");


	</script>
	</body>
	</html>