I want the select button's innerHTML as selected and unselected when clicked. When the select button is selected a remove button will appear at the right side of the select button otherwise the remove button will not appear.

Can you do this with scope attribute and tbody and let me know the work of scope attribute and tbody tag.

Also I want to edit the selected list. If the select button is selected edit button will become visible in the form. Add some code in edit function so that I can edit the selected list with the new input of the form.

nth-child's(even and odd) color of the lists should be different in the table as it shown with css. That need to be done in javascript.

And add some code to remove all list in remove function.

What should I use instead of innerHTML?

New Code:

HTML

Code:
<!DOCTYPE html>

<html>

<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>

<body>

<table id="Table" border="1">

<tr>

<th>First Name</th>

<th>Last Name</th>

<th>Age</th>

<th>Select</th>

<th>Remove</th>

</tr>

</table>

<form name="myForm" id="Form">

<input type="text" placeholder=" First Name" name="fname" id="fname"/>

<br/>
<br/>

<input type="text" placeholder=" Last Name" name="lname" id="lname"/>

<br/>
<br/>

<input type="text" placeholder=" Age" name="age" id="age"/>

<br/>
<br/>

<button type="button" onclick="add()">Add</button>

<button type="button" onclick="edit()">Edit</button>

<button type="button" onclick="remove()">Remove All</button>

</form>

<script>
function check(){

var isEmpty=false;

var fname=document.getElementById("fname").value;

var lname=document.getElementById("lname").value;

var age=document.getElementById("age").value;

if(fname==""){

alert("Enter First Name.");

isEmpty=true;

}

else if(lname==""){

alert("Enter Last Name.");

isEmpty=true;

}

else if(age==""){

alert("Enter Age.");

isEmpty=true;

}

return isEmpty;

}

function select(){

var i;

var table=document.getElementById("Table");

for(i=1; i<table.rows.length; i++){

table.rows[i].onclick=function(){

document.getElementById("fname").value=this.cells[0].innerHTML;

document.getElementById("lname").value=this.cells[1].innerHTML;

age=document.getElementById("age").value=this.cells[2].innerHTML;

var rindex=this.rowIndex;

console.log(rindex);

}

}

}

select();

function add(){

if(!check()){

var i;

var table=document.getElementById("Table");

var fname=document.getElementById("fname").value;

var lname=document.getElementById("lname").value;

var age=document.getElementById("age").value;

document.getElementById("fname").value="";

document.getElementById("lname").value="";

document.getElementById("age").value="";

var insrow=table.insertRow(table.length); //table.length or 1 if after table or 0 if before table

var cell1=insrow.insertCell(0);

var cell2=insrow.insertCell(1);

var cell3=insrow.insertCell(2);

var cell4=insrow.insertCell(3);

var cell5=insrow.insertCell(4);




var b1=document.createElement("BUTTON");

b1.innerHTML="SELECT";

b1.setAttribute("id", "b1");



var b2=document.createElement("BUTTON");

b2.innerHTML="REMOVE";

b2.setAttribute("id", "b2");

b2.addEventListener("click", function(){

this.parentElement.parentElement.style.display="none";

});


cell1.innerHTML=fname;

cell2.innerHTML=lname;

cell3.innerHTML=age;

cell4.appendChild(b1);

cell5.appendChild(b2);




}

select();

}

function edit(){

var table=document.getElementById("Table");

var fname=document.getElementById("fname").value;

var lname=document.getElementById("lname").value;

var age=document.getElementById("age").value;


var i;



}

function remove(){

var table=document.getElementById("Table");

/*

table.deleteRow(this.rowIndex);

*/

}
</script>

</body>

</html>
CSS

Code:

th, td{
     padding:10px;
	}

#b1{
    outline:none;
	background:green;
	color:white;
	border:none;
	padding:5px 20px;
   }
   
#b2{
    outline:none;
	background:red;
	color:white;
	border:none;
	padding:5px 20px;
   }
   


#Table{
       border-collapse:collapse;
	   width:600px;
	  }
	  
#Form{
      margin-left:700px;
	  margin-top:20px;
	 }
	 
#fname{
       padding:10px;
	   width:200px;
	   border:0.1px solid green;
	   outline:none;
	   user-select:none;
	  }
	  
#lname{
       padding:10px;
	   width:200px;
	   border:0.1px solid green;
	   outline:none;
	   user-select:none;
	  }
	  
#age{
     padding:10px;
	 width:200px;
	 border:0.1px solid green;
	 outline:none;
	 user-select:none;
	}
	  
button[type=button]{
                  padding:5px 10px;
                  background:#353535;
				  color:white;
				  border:none;
				  outline:none;
				  cursor:pointer;
				  user-select:none;
				 }
				 
tr{
  background:white;
  color:black;
  transition:0.4s;
  cursor:pointer;
  text-align:center;
 }
 
tr:nth-child(even){
                 background:black;
				 color:white;
				}
				
tr:nth-child(odd){
                 background:rgb(0,0,0,0.8);
				 color:white;
				}
				
tr:first-child{
              background:#153535;
			  color:white;
			 }
 
tr:hover{
        background:white;
		color:black;
	   }