1 answer

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

Question:

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?

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 OkKHere 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 ENDTesting 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

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>

<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="bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"

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="jquery-3.3.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="' + 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>

.

Similar Solved Questions

1 answer
Discuss the specific differences between focused and dispersed approaches to creating corporate entrepreneurship.
Discuss the specific differences between focused and dispersed approaches to creating corporate entrepreneurship....
1 answer
Question: Consider the houses are randomly allocated such that the average value to consumers is $525....
Question: Consider the houses are randomly allocated such that the average value to consumers is $525. What are the consumer surplus and producer surplus when a rent ceiling is set at $300/month? The figure shows the demand (downward sloping straight line) for and the supply (upward sloping straight...
1 answer
Classify the following topics as relating to microeconomics or macroeconomics Topic The effect of a change...
Classify the following topics as relating to microeconomics or macroeconomics Topic The effect of a change in price of one good on a related good A firm's decision about whether to continue production or to shut down The effect of minimum-wage law on unemployment The relationship between the inf...
1 answer
Explain the importance of protein degradation, and outline the essential pathway for cytosolic protein degradation.
explain the importance of protein degradation, and outline the essential pathway for cytosolic protein degradation....
1 answer
Old Country Links, Inc., produces sausages in three production departments—Mixing, Casing and Curing, and Packaging. In...
Old Country Links, Inc., produces sausages in three production departments—Mixing, Casing and Curing, and Packaging. In the Mixing Department, meats are prepared and ground and then mixed with spices. The spiced meat mixture is then transferred to the Casing and Curing Department, where the mi...
1 answer
Sweaters sell for $23 at the crafts fair. Allie knits sweaters and her marginal costs are...
Sweaters sell for $23 at the crafts fair. Allie knits sweaters and her marginal costs are given in the table below. Allie’s marginal costs increase with each additional sweater. If Allie is behaving rationally, how many sweaters will she sell? 1st sweater 6 2nd sweater 9 3rd sweater...
1 answer
Diffraction through single slit
The distance between the first and fifth minima of a single-slitdiffraction pattern is 0.25 mm withthe screen 50 cm away from the slit,when light of wavelength 477 nmisused.(a) Find the slit width. mm(b) Calculate the angle of the firstdiffraction minimum. rad...
1 answer
Suppose a 500. mL flask is filled with 1.7 mol of O_2 and 1.1 mol of...
Suppose a 500. mL flask is filled with 1.7 mol of O_2 and 1.1 mol of NO. The following reaction becomes possible: N_2(g) + O_2(g) 2NO(g) The equilibrium constant K for this reaction is 3.80 at the temperature of the flask. Calculate the equilibrium molarity of NO....
1 answer
Why are opportunistic infections common with AIDS
Why are opportunistic infections common with AIDS...
1 answer
The human organ that has the highest incidence of major anomalies is the
The human organ that has the highest incidence of major anomalies is the...
1 answer
A 2.5-cm-tall object is 90cm in front of a diverging lens that has a -45cm focal...
A 2.5-cm-tall object is 90cm in front of a diverging lens that has a -45cm focal length. A) Calculate the image position. B) Calculate the image height. Type a positive value if the image is upright and a negative value if it is inverted. Please show all your formulas and work!...
1 answer
Your receipt no. is 154-4112 Previous Tries Three dentical small Styrofoam balls (m2.10g) are suspended from...
Your receipt no. is 154-4112 Previous Tries Three dentical small Styrofoam balls (m2.10g) are suspended from a fixed point by three nonconducting threads, each with a length of 54.9cm and with negligible mass. At equilibrium the three balls form an equilateral triangle with sides of 31.6cm. What is ...
1 answer
For the following problems, you’ll need to get the values for certain questions based on your...
For the following problems, you’ll need to get the values for certain questions based on your birthdate. Make sure you show all your work for every problem. To begin with, enter your birthdate using the MM/DD/YYYY format. Is 10/27/1994 IndieFilmsRUs is considering whether it should obtain the ...
1 answer
VETERRIA FERREL Question 7 - of 10 Step 1 of 1 11:16:38 Florence wishes to retire...
VETERRIA FERREL Question 7 - of 10 Step 1 of 1 11:16:38 Florence wishes to retire at age 65 with $1,500,000 in her retirement account. When she turns 22, she decides to begin depositing money into an account with an APR of 7%. What is the monthly deposit that Florence must make in order to reach her...