I need HELP to get the code to do these function: If …

I need HELP to get the code to do these function: If I keep clicking "Generate" multiple times, the list keeps on getting bigger. The number of rows should always be equal to the number of columns. Also make the code to show both table at the same time?

Here is an example of the top portion of assignment2.html page; The values shown are DEFAULTS. User can update any of these values. Program Increment (PI) Summary Table Base URL https://metro Program Increment ID 201901 Agile Release Train (ART) ics325 Names of the Teams: FRONT_END, SERVER, DATABASE, DEPLOYMENT Generate

Here is the code I got some far :

Code:

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<title>Testing</title>

<link rel="stylesheet" href="javascript:void(0)">

crossorigin="anonymous">

</head>

<style>

td {

padding: 5px;

}

</style>

<body>

<div class="container container-fluid">

<br>

<h3>Program Increment (PI) Summary Table</h3>

<br>

<br>

<div class="row" style="text-align: left;">

<div class="col-md-4">

Base URL:

</div>

<div class="col-md-8">

<input type="text" class="form-control" name="base_url" placeholder="Enter URL" value="https://metro">

</div>

</div>

<br>

<div class="row" style="text-align: left;">

<div class="col-md-4">

Program Increment ID:

</div>

<div class="col-md-8">

<input type="text" class="form-control" name="pid" placeholder="Enter ID" value="201901">

</div>

</div>

<br>

<div class="row" style="text-align: left;">

<div class="col-md-4">

Agile Release Train (ART):

</div>

<div class="col-md-8">

<input type="text" class="form-control" name="art" placeholder="Enter ART" value="ica325">

</div>

</div>

<br>

<div class="row" style="text-align: left;">

<div class="col-md-4">

Names of the Teams:

</div>

<div class="col-md-8">

<input type="text" class="form-control" name="teams" placeholder="Enter name of teams (seperated by comma)" value="FRONT_END,SERVER,DATABASE,DEPLOYMENT">

</div>

</div>

<br>

<br>

<center>

<button class="btn btn-primary" id="generate">Generate</button>

</center>

<br>

<br>

<div>

<center>

<table border="1" id="result_table"></table>

</center>

</div>

</div>

</body>

<script src="https://code.jquery.com/jquery-1.9.1.js" integrity="sha256-e9gNBsAcA0DBuRWbm0oZfbiCyhjLrI6bmqAl5o+ZjUA=" crossorigin="anonymous"></script>

<script type=text/javascript>

$('#generate').bind('click', function() {

console.log($('input[name="base_url"]').val())

console.log($('input[name="pid"]').val())

console.log($('input[name="art"]').val())

console.log($('input[name="teams"]').val().split(","))

var team_names = $('input[name="teams"]').val().split(",");

var pid = $('input[name="pid"]').val();

var table = document.getElementById("result_table");

var base_url = $('input[name="base_url"]').val();

document.getElementById("result_table").innerHTML +="<tr><td><b>No.</td><td><b>Team Name</td><td><b>" + pid + "-1</td><td><b>"+ pid + "-2</td><td><b>"+ pid + "-3</td><td><b>"+ pid + "-4</td><td><b>"+ pid + "-5</td><td><b>"+ pid + "-6</td><td><b>"+ pid + "-IP</td>";

for(var i=0;i<team_names.length;i++)

{

var row = table.insertRow(i+1);

var cell1 = row.insertCell(0);

var cell2 = row.insertCell(1);

var cell3 = row.insertCell(2);

var cell4 = row.insertCell(3);

var cell5 = row.insertCell(4);

var cell6 = row.insertCell(5);

var cell7 = row.insertCell(6);

var cell8 = row.insertCell(7);

var cell9 = row.insertCell(8);

cell1.innerHTML = i+1;

cell2.innerHTML = team_names[i];

cell3.innerHTML = '<a href="javascript:void(0)">

cell4.innerHTML = '<a href="javascript:void(0)">

cell5.innerHTML = '<a href="javascript:void(0)">

cell6.innerHTML = '<a href="javascript:void(0)">

cell7.innerHTML = '<a href="javascript:void(0)">

cell8.innerHTML = '<a href="javascript:void(0)">

cell9.innerHTML = '<a href="javascript:void(0)">

}

});

</script>

</html>

Testing (Continued) 1. Are both top and bottom portions on the same page? 2. Once the page is first invoked, the table shows up with the default values 3. When the users change the inputs and click "Generate", the table is updated 4. When the user hovers the mouse over a link, the tool tip shows the hyperlink. 5. When the user clicks on the link, take the user to a new tab. (since the link did not exist, the browser shows LINK NOT FOUND). That is OkK
Here is an example of the top portion of "assignment2.html" page; The values shown are DEFAULTS. User can update any of these values. Program Increment (PI) Summary Table Base URL https://metro Program Increment ID 201901 Agile Release Train (ART) ics325 Names of the Teams: FRONT_END, SERVER, DATABASE, DEPLOYMENT Generate
Here is an example of the bottom portion of "assignment2.html" page; The number of rows, column headers, row values and the hyperlinks behind the values these all depend on the inputs provided by the user given in the top portion No Team Name 1 FRONT END 2 SERVER 3 DATABASE 4DEPLOYMENT 201901-1 201901-1 201901-1 201901-1 201901-1 201901-2 201901-2 201901-2 201901-3 201901-4 201901-5 201901-6 201901-1Р 201901-2 201901-3 201901-2 201901-3 201901-4 201901-5 201901-6 201901-IP 2019013 201901-4 201901-5 201901-6 201901-IP 201901-3 201901-4 201901-5 201901-6 201901-IP 201901-4 201901-5 201901-6 201901-IP NOTE: Each red number will have the HYPER-LINK populated as follows. baseurl +"?id-" + iteration id + "" + team name For example, for the inputs provided in earlier slide, the first hyperlink will be as follows. https://metro?id-201901-1 FRONT END
Testing No Team Name 1 FRONT_END 2 SERVER 3 DATABASE 4 DEPLOYMENT 201901-1 201901-2 201901-3 201901-4 201901-5 201901-6 201901-IP 201901-1 201901-2201901-3 201901-4 201901-5 201901-6 201901-IP 20190y-1 201901-2 201901-3 201901-4 201901-5 201901-6 201901-IP 201301-1 201901-2 201901-3 201901-4 201901-5 201901-6 201901-IP 01901-1 201901-2 201901-3 201901-4 201901-5 201901-6 201901-IP NOTE: Each red number will have the HYPER-LINK populated as followS base-y +"?id=" + iteration_id + "" + team-name For éxample, for the inputs provided in earlier slide, the firsf and last hyperlink will be as follows https://metro?id-201901-1_FRONT_END https://metro?id-201901-1P_DEPLOYMENT

Answers

Now the table columns and rows will not be equal.

And the the number of rows will decided by the length of the team names.

We can only generate table only once at a time after button will be disabled.So rows and columns will not be equal.

<!doctype html>

<head>

<title>Testing</title>

crossorigin="anonymous">

</head>

<style>

td {

padding: 5px;

}

</style>

<body>

<br>

<h3>Program Increment (PI) Summary Table</h3>

<br>

Base URL:

</div>

</div>

<br>

Program Increment ID:

</div>

</div>

<br>

Agile Release Train (ART):

</div>

</div>

<br>

Names of the Teams:

</div>

</div>

<br>

<button class="btn btn-primary" id="generate">Generate</button>

</center>

<br>

<div>

</center>

</div>

</body>

$('#generate').bind('click', function() {

console.log($('input[name="base_url"]').val())

console.log($('input[name="pid"]').val())

console.log($('input[name="art"]').val())

console.log($('input[name="teams"]').val().split(","))

var team_names = $('input[name="teams"]').val().split(",");

var pid = $('input[name="pid"]').val();

var table = document.getElementById("result_table");

var base_url = $('input[name="base_url"]').val();

document.getElementById("result_table").innerHTML +="<tr><td><b>No.</td><td><b>Team Name</td><td><b>" + pid + "-1</td><td><b>"+ pid + "-2</td><td><b>"+ pid + "-3</td><td><b>"+ pid + "-4</td><td><b>"+ pid + "-5</td><td><b>"+ pid + "-6</td><td><b>"+ pid + "-IP</td>";

for(var i=0;i<team_names.length;i++)

{

var row = table.insertRow(i+1);

var cell1 = row.insertCell(0);

var cell2 = row.insertCell(1);

var cell3 = row.insertCell(2);

var cell4 = row.insertCell(3);

var cell5 = row.insertCell(4);

var cell6 = row.insertCell(5);

var cell7 = row.insertCell(6);

var cell8 = row.insertCell(7);

var cell9 = row.insertCell(8);

cell1.innerHTML = i+1;

cell2.innerHTML = team_names[i];

cell3.innerHTML = '<a href="' + base_url + "?id=" + pid + "-1" + "_" + team_names[i] + '">'+ pid + '-1' + '</a>';

cell4.innerHTML = '<a href="' + base_url + "?id=" + pid + "-2" + "_" + team_names[i] + '">'+ pid + '-2' + '</a>';

cell5.innerHTML = '<a href="' + base_url + "?id=" + pid + "-3" + "_" + team_names[i] + '">'+ pid + '-3' + '</a>';

cell6.innerHTML = '<a href="' + base_url + "?id=" + pid + "-4" + "_" + team_names[i] + '">'+ pid + '-4' + '</a>';

cell7.innerHTML = '<a href="' + base_url + "?id=" + pid + "-5" + "_" + team_names[i] + '">'+ pid + '-5' + '</a>';

cell8.innerHTML = '<a href="' + base_url + "?id=" + pid + "-6" + "_" + team_names[i] + '">'+ pid + '-6' + '</a>';

cell9.innerHTML = '<a href="' + base_url + "?id=" + pid + "-IP" + "_" + team_names[i] + '">'+ pid + '-IP' + '</a>';

}

});

</script>
<script>

//disable the generate button

$('button').on('click', function() {
$(this).prop('disabled', true);
});
</script>
</html>

I need HELP to get the code to do these function: If I keep clicking "Generate"...

Question:

Answers

Similar Solved Questions

Discuss the specific differences between focused and dispersed approaches to creating corporate entrepreneurship.

Question: Consider the houses are randomly allocated such that the average value to consumers is $525....

Classify the following topics as relating to microeconomics or macroeconomics Topic The effect of a change...

Explain the importance of protein degradation, and outline the essential pathway for cytosolic protein degradation.

Old Country Links, Inc., produces sausages in three production departments—Mixing, Casing and Curing, and Packaging. In...

Sweaters sell for $23 at the crafts fair. Allie knits sweaters and her marginal costs are...

Diffraction through single slit

Suppose a 500. mL flask is filled with 1.7 mol of O_2 and 1.1 mol of...

Why are opportunistic infections common with AIDS

The human organ that has the highest incidence of major anomalies is the

A 2.5-cm-tall object is 90cm in front of a diverging lens that has a -45cm focal...

Your receipt no. is 154-4112 Previous Tries Three dentical small Styrofoam balls (m2.10g) are suspended from...

For the following problems, you’ll need to get the values for certain questions based on your...

VETERRIA FERREL Question 7 - of 10 Step 1 of 1 11:16:38 Florence wishes to retire...