Create the HTML table using Javascript Arrays?

Question

I am given a lab assignment. The Question is as follows: Create Table Using JS Arrays

I came up with the following code:

<!DOCTYPE html>
<html>
<head>
<title> Manan Tyagi 16BCE1240</title>

<p style="text-align:center;color:purple;font-size:30px" >Coordinates Of State Capitals</p>
<p id="demo"></p>

<script>
var capital=["Montgomery","Juneau","Phoenix","Little Rock","Sacramento","Denver","Hartford","Dover","Tallahassee","Atlanta"];
var state=["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia"];
var code=["AL","AK","AZ","AR","CA","CO","CT","DE","FL","GA"];
var latitude=[32,58,33,35,38,40,42,39,31,34];
var longitude=[-86,-134,-113,-92,-121,-105,-73,-76,-84,-84];
var htmlstr="<tbody>";
for(var i=0;i<10;++i)
{
    htmlstr+="<tr>"+"<td>"+capital[i]+"</td>"+"<td>"+state[i]+"</td>"+"<td>"+code[i]+"</td>"+"<td>"+latitude[i]+"</td>"+"<td>"+longitude[i]+"</td>"+"</tr>"+"<br>";
}
htmlstr+="</tbody>";
document.write(htmlstr);
 </script>

</body>
</head>
</html>

I used document.write() function just to display the obtained output. I wish to create the table as given in the picture? Where and what should I change in the code for it to run properly?

Thank you.

[EDIT] I am concerned about sorting part. How do I sort the table according to specific column only?

What is the output from your code, and how does it differ from the lab question? Are you asking about the formatting (colours and borders of the table), or the sorting and averaging part? — Neil
– Neil, Commented Aug 14, 2017 at 9:09
Neil I can format the table, that's not the issue. I am concerned about sorting part. How do I sort the table according to specific column only? — Manan Tyagi
– Manan Tyagi, Commented Aug 14, 2017 at 9:12
I would suggest your data is in the wrong format to sort, as you have 5 independent arrays (i.e. sort the latitude array and that won't sort the capital array). Is there a data structure you can use, so that all items in a row are part of the same array element? (I'm trying to prompt you to the correct answer, rather than giving you the answer directly). — Neil
– Neil, Commented Aug 14, 2017 at 9:16

Sankar · Accepted Answer · 2017-08-14 09:06:41Z

You missed to include <table> tag. Refer http://html.com/tables/

<!DOCTYPE html>
<html>

<head>
  <title> Manan Tyagi 16BCE1240</title>

  <p style="text-align:center;color:purple;font-size:30px">Coordinates Of State Capitals</p>
  <p id="demo"></p>

  <script>
    var capital = ["Montgomery", "Juneau", "Phoenix", "Little Rock", "Sacramento", "Denver", "Hartford", "Dover", "Tallahassee", "Atlanta"];
    var state = ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia"];
    var code = ["AL", "AK", "AZ", "AR", "CA", "CO", "CT", "DE", "FL", "GA"];
    var latitude = [32, 58, 33, 35, 38, 40, 42, 39, 31, 34];
    var longitude = [-86, -134, -113, -92, -121, -105, -73, -76, -84, -84];
    var htmlstr = "<table><tbody>";
    for (var i = 0; i < 10; ++i) {
      htmlstr += "<tr>" + "<td>" + capital[i] + "</td>" + "<td>" + state[i] + "</td>" + "<td>" + code[i] + "</td>" + "<td>" + latitude[i] + "</td>" + "<td>" + longitude[i] + "</td></tr>";
    }
    htmlstr += "</tbody></table>";
    document.write(htmlstr);
  </script>
</head>

<body>
</body>


</html>

Collectives™ on Stack Overflow

Create the HTML table using Javascript Arrays?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related