CODEWITHSUNDEEP
javascripthtmlarrays
Manan Tyagi
Manan Tyagi

Reputation: 40

Create the HTML table using Javascript Arrays?

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?

Upvotes: 1

Views: 79

Answers (1)

Sankar
Sankar

Reputation: 7117

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>

Upvotes: 1

Related Questions