ZuoTi.Pro
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="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>

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

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>

0 0
Add a comment
Know the answer?
Add Answer to:
I need HELP to get the code to do these function: If I keep clicking "Generate"...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • HTML Coding <html> <head> <title> Contact -- Charles Robertson </title> </head> <body bgcolor="white"> <table width="700" height="500"...

    HTML Coding <html> <head> <title> Contact -- Charles Robertson </title> </head> <body bgcolor="white"> <table width="700" height="500" border="10"> <!-----row---1----logo---> <tr><td> <img src="20150516_084745" width="700" height="200"> </td></tr> <!-----row-2-navigation-----> <tr><td> <!----start-navigation-table----> <table width="700" height="100" border="5" bgcolor="lightgreen" > <tr><td><a href="HerbFarm.html"> <center> HOME </center></a></td> <td><a href="about3.html"> <center> ABOUT </center></a></td> <td><a href="contact3.html"> <center> CONTACT </center></a></td> <td><a href="gallery3.html"> <center> GALLERY </center></a></td> </tr> </table> <!------end-navigation-table----> </td></tr> <tr><td> <h1>Contact </h1> <form action="thankyou.html">    </form> <div class="row"> <div class="col-75"> <div class="container"> <form action="/action_page.php"> <div class="row"> <div class="col-50"> <h3>Billing Address</h3> <label for="fname"><i...

  • How do i make my html show 10 results per page, and how do i make...

    How do i make my html show 10 results per page, and how do i make the books clickable to show results about them? <!DOCTYPE html> <html> <head> <title>Google Books Search</title> <script src="https://code.jquery.com/jquery-2.1.4.min.js"> </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <style> body{ background:lightblue } .wrap{ max-width:400px; margin:auto; margin-top:10px; } .pagination, pagination-last{ float:left; } a{ text-decoration:none; padding:15px 20px; border:1px solid black; border-right:none; background:#f2f2f2; font-size:18px; font-weight:bold; } .pagination-last a{ border-right:1px solid black; } a:hover { background:orange; color;white; } </style> <!-- <script src="js/main.js"></script> --> <script> function B_Search()...

  • I need help, I have my page set up, I just need help with some aesthetics,...

    I need help, I have my page set up, I just need help with some aesthetics, and getting the clear button to work, and get a popup when they click submit that says success along as all fields are filled out correctly. Any help would be fantastic. <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="styleSheet.css" /> <title>2020-2021 Student-Athlete Registration Form - Weber State University</title> </head> <body> <header> <h1>WEBER STATE UNIVERSITY</h1> </header> <div class="link"> <ul> <li><a href="page 1.html"><span class="text">Home</span></a></li> </ul> </div>...

  • Hi Expert I need to make a html checkout page link from product page <!DOCTYPE html>...

    Hi Expert I need to make a html checkout page link from product page <!DOCTYPE html> <html lang="en"> <head>     <link rel="stylesheet" href="bootstrap/css/bootstrap.css">     <link rel="stylesheet" href="style.css">     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>     <script src="./bootstrap/js/bootstrap.js"></script>     <meta charset="UTF-8">     <title>Perry Gerry Mobile Cellular</title> </head> <body> <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 bg-white border-bottom shadow-sm">     <h5 class="my-0 mr-md-auto font-weight-normal">Perry Gerry Mobile Cellular</h5>     <nav class="my-2 my-md-0 mr-md-3">         <a class="p-2 text-dark" href="index.html">Home</a>         <a class="p-2 text-dark" href="about.html">About Us</a>         <a class="p-2 text-dark" href="products.html">Products</a>         <a class="p-2 text-dark"...

  • LANGUAGE JAVASCRIPT, PHP Need help with PHP and ajax code. The user needs to login but,...

    LANGUAGE JAVASCRIPT, PHP Need help with PHP and ajax code. The user needs to login but, I keep getting an error that I coded "Wrong username and password!" ***PLEASE DONT GIVE ME A NEW CODE THAT IS NOWHERE NEAR THE CODE I SUBMITTED***** PLEASE LOOK AT THE CODE AND SEE ANY ISSUES login.html <!DOCTYPE html> <html> <head> <title>login popup</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style type="text/css"> body { background-color: white; } </style> </head> <body> <center> <h1 style="text-align: center;"> Login </h1> <form>             Login ID:...

  • I have the code buts its not working as this below instruction can anyone help Use...

    I have the code buts its not working as this below instruction can anyone help Use the requirements from the pizza part of Assignment 6 and do the following using CSS and an internal style sheet: 1.     Your Javascript function should be in an external file (don’t forget to move it up to studentweb too) 2.     Put a red border of 300px in width around the form 3.     There should be three Div sections: header, main_body, and footer. 4.     Center the name of your...

  • I need to complete 3 validation cases in this Javascript code. I need to validate email,...

    I need to complete 3 validation cases in this Javascript code. I need to validate email, phone and street address. How would I go about validating these 3 cases in this code: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Week 10: Regular Expressions</title> <style type="text/css"> span { padding: 2px; } .success { color: #008000; background: #99cc99; } .failure { color: #ff0000; background: #ff9999; } </style> <script type="text/javascript"> function validateInput(form) { var result0 = document.getElementById('result0'), result1 = document.getElementById('result1'), result2 = document.getElementById('result2'),...

  • <html>     <head>       <title>Sign Up page</title>   <form name="validationForm" method="post" onsubmit="return checkvalidation()">      &n

    <html>     <head>       <title>Sign Up page</title>   <form name="validationForm" method="post" onsubmit="return checkvalidation()">         <!--div class-->       <div class="formvalidation">       <label>Your first Name</label>        <span id="showname"></span>        <!--label for firstname-->       <input type="text" name="firstname" class="formsignup"  id ="firstn" placeholder="Enter your Name">      <br><br>           <!--lastname-->       <label>Your last Name</label> <span id="showlname"></span>       <input type="text" name="lastname" class="formsignup" id="lastn" placeholder="Enter your last Name">       <br><br>        <!--email-->         <label>Your Email</label>          <span id="showemail"></span>         <input type="email" name="emailid" class="formsignup" size="45" id="emailn" placeholder="Enter your Email">        <br><br> <input type="submit" value="send">     </div>           </form> <script>      function checkvalidation(){     var name = document.forms["validationForm"]["firstname"].value;     var lname...

  • I need help incorporating javascript into my page. The Lessons page has a message box (not...

    I need help incorporating javascript into my page. The Lessons page has a message box (not an alert box) that becomes visible/invisible when the mouse is moved over/off the small, red hyperlink on the last line that says, "note." The note is 10pt, red, and italic. The message box contains the text, "Students who pre-pay for the entire term will have the registration fee waved." It is 150px wide, with an "azure" background and a black border. It has 5px...

  • Below is the code created for a previous assignment. I now need to create functions to...

    Below is the code created for a previous assignment. I now need to create functions to validate the name, age, and item selection in an external JavaScript file. Specifically, check for the following: The user has entered a name Age is a number between 18 and 110 An item is selected Ensure that a handler returns true if the input is acceptable and false otherwise. Add an onSubmit attribute to the form tag so that a validation failure prevents the...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT