Javascript/Assignment1 at main · snehalVelankar/Javascript · 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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html>
<head>

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">


  <style type="text/css">
    table{
      margin:40px auto;
      width: 80%;
    }
    #button1{
      width:50%;
      background-color: green;
    }
    #button2{
      width:50%;
      background-color: red;
    }
    input,select{
      width: 80%;
    }
  </style>

</head>
<body>

   <table id="table1" border="2px solid black">
     <tr>
       <th>#</th>
       <th>Name</th>
       <th>Age</th>
       <th>Gender</th>
       <th>Actions</th>
     </tr>
     <tr>
       <td></td>
       <td><input type="text" id="name" name="name"></td>
       <td><input type="text" id="age" name="age"></td>
       <td><select id="gender" name="gender">
         <option value="Male">Male</option>
         <option value="Female">Female</option>
       </select></td>
       <td id="action"></td>
     </tr>
   </table>

   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
   <script type="text/javascript">

            var rowCount = $("#table1  td").closest("tr").length;
            var data = document.getElementById("action");
            var count = 1;

          if(rowCount!=1){
           data.innerHTML = "<button id='button1' onclick='add()'>+</button><button id='button2' onclick='remove(this)'>-</button>";
          }else{
            data.innerHTML = "<button id='button1' onclick='add()'>+</button>";
          }

      function add() {
            var rowCount = $("#table1  td").closest("tr").length;
            var table = document.getElementById("table1");

            // Create an empty <tr> element
            var row = table.insertRow(rowCount);

            // Insert new cells:
            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);

            cell1.innerHTML = count++;
            cell2.innerHTML = document.getElementById("name").value;
            cell3.innerHTML = document.getElementById("age").value;
            cell4.innerHTML = document.getElementById("gender").value;
            cell5.innerHTML = "<button id='button1' onclick='add()'>+</button><button id='button2' onclick='remove(this)'>-</button>";

      }

      function remove(btn){
        var row = btn.parentNode.parentNode;
        row.parentNode.removeChild(row);
      }

   </script>

</body>
</html>