js table exercise

by Pritesh Patel

HTML

<div class="container">
<div >
<p class="heading">
Employee Table
</p>
<div>

</div>
<table id="myTable" contenteditable="true">
<tr contenteditable="false">
  <th>FirstName</th>
  <th>SecondName</th>
  <th>Age</th>
  <th>Add</th>
</tr>
<tr contenteditable="true">
    <td >Jill</td>
    <td>Smith</td> 
    <td>50</td>
    <td><input type="button" value="-" id="delete" ></td>
  </tr>
  <tr>
    <td>Steve</td>
    <td>Jobs</td> 
    <td>55</td>
    <td><input type="button" value="-" class="delete" ></td>
  </tr>
  <tr>
    <td >Bill</td>
    <td>Gates</td> 
    <td>45</td>
    <td><input type="button" value="Delete" class="delete" ></td>
  </tr>

<tr>
    <td id="name_row"></td>
    <td id="country_row"></td> 
    <td id="age_row"></td>
    <td><button value="Add" id="add">Add</button></td>
  </tr>
</table>

</div>
</div>

CSS

table, th, td{
    border: 1px solid black;
    border-collapse: collapse;
}
th,td{
  padding:10px;
}
th{
  background-color: black;
  color: white;
}
.heading{
  border: 1px solid black;
  width: 200px;
  display: block;
  padding: 10px;
  text-align: center;
  float: right;
}
.container{
  width:350px;
  border: 1px solid black;
  height:auto;
}

JavaScript

/* var table = document.getElementById("myTable"); */
var add = document.getElementById("add");
var del = document.getElementById("delete")
add.addEventListener('click',myCreateFunction);
del.addEventListener('click',delRow);

function myCreateFunction(){
	/* var row =table.insertRow(4);
	  var cell1 =row.insertCell(0);
	   var cell2 =row.insertCell(1);
	    var cell3 =row.insertCell(2);
	     var cell4 =row.insertCell(3); */
     
     var table = document.getElementById("myTable");
     
      
     
     var rowCount = (table.rows.length-1);
    //for(var i=0; i<rowCount; i++){
		var row = table.insertRow(rowCount);
      
      
      
      
      
       var colCount = table.rows[0].cells.length; 
      
      
      for(var i=0; i<4; i++) {
      				if(i<=2){
              var newcell	= row.insertCell(i);}
              else if(i==3){
                var cell4 = row.insertCell(i);
							cell4.innerHTML = table.rows[1].cells[3].innerHTML;
								//cell4.name = 'qty' + x;
							//var element4 = document.createElement("button");
								//element4.type = "button";
							//cell4.appendChild(cell4.innerHTML);
              //var newcell	= row.insertCell(element);
    
              	//var element = document.createElement("button");
              // element.setAttribute("type", button);
                 //element.setAttribute(td);
                  //element.setAttribute(td);
                   //element.setAttribute(td);
              }
      
              //newcell.innerHTML = table.rows[4].cells[i].innerHTML;  
				//alert(newcell.childNodes);
				 /* switch(newcell.childNodes[i].type) {
				  case "button":
				      newcell.childNodes[0].value = "";
				      break;
				               case "button":
				      newcell.childNodes[1].value = "";
				      break;
				               case "button":
				      newcell.childNodes[2].value = "";
				      break;
				               case "button":
				      newcell.childNodes[3].value = "";
				      break;}...