jquery/index.html at master · SandhiyaViswanathan/jquery · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Json data to HTML Table using Ajax Jquery getJSON method</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
        <link href="barchart.css" rel="stylesheet">
<script type="text/javascript" src="index.js"></script>


    <style>
      table, th, td
       {
          border: 2px solid black;
/*          border-collapse: collapse;
*/       }
      th, td
       {
          padding: 10px 5px 10px 10px;
       }
       h2
       {
        text-align: center;
       }
    </style>
  </head>

  <body>

  <h2>Food Facts</h2>
      <div class="container ">
      <div class="row">
        <div class="col-lg-6">
          <table id="country_table" border="1" class="table table-striped ">
            <tr>
              <th>Country</th>
              <th>Sugar</th>
              <th>Salt</th>
              <th></th>
            </tr>
          </table>
        </div>

       <div class="col-lg-6" id="addgraph"></div>
     </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <form>
                <table  border="0" align="center">
                     <br>
                     <tr><td>Country:</td><td><input type="text" id="country_Name" name="Country"></td></tr>
                     <tr><td>Sugar:</td><td><input type="number" id="sugar_Value" name="Sugar"></td></tr>
                     <tr><td>Salt:</td><td><input type="number" id="salt_Value" name="Salt"></td></tr>
                     <tr><td></td><td><input type="button" value="Add" id="add_value" name="btnAdd"></td></tr>
                  </table>
          </form>
        </div>
      </div>
    </div>


  </body>
</html>