1. Engineering
  2. Computer Science
  3. i need help to get the code to do these...

Question: i need help to get the code to do these...

Question details

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="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/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="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="' + 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>

</html>

Solution by an expert tutor
Blurred Solution
This question has been solved
Subscribe to see this solution