JSFiddle - React, Tailwind, and code Playground

by Andrey

HTML

<table>
  <tbody id='table'>
    <tr>
      <th colspan='3'> COOKIES
      </th>
    </tr>
    <tr class="title">
      <td>№</td>
      <td>Cookie's name</td>
      <td>Cookie's value</td>
    </tr>
  </tbody>
</table>

CSS

table{
  margin: 0 auto;
   border-collapse: collapse;
  text-align: center;
}
table,
td {
  border: 1px solid black;
 
  padding: 4px;
}
.title{
   font-weight: bold;
}

JavaScript

for(var k = 1; k<10; k++){
  	//document.cookie = "cookie"+i+"=value"+i";
    document.cookie = "cookie"+k+"=value"+k;
    //alert(document.cookie);
  }
  /*document.cookie = "cookie1=value1";
	document.cookie = "cookie2=value2";
	document.cookie = "cookie3=value3";*/

	//console.log(document.cookie);
	var arr = document.cookie.split(';'),
		tr,
	  frag = document.createDocumentFragment();

	console.log(arr.length);
	for (var i = 0; i < arr.length; i++) {
	  tr = document.createElement('tr')
	    //console.log(arr[i]);
	  var innerArr = arr[i].split('=');
	 
    if(i%2 === 0){tr.style.background = 'green'};
	  tr.innerHTML = "<td>"+(i+1)+"</><td>" + innerArr[0] + "</td><td>" + innerArr[1] + "</td>"
	  frag.appendChild(tr);
	}

table.appendChild(frag);
  
  var row = document.querySelectorAll('tr');
  for(var i = 0; i<row.length; i++){
  	row[i].addEventListener('click', function(event){
    	console.log(this.children[1].innerHTML);
      var time = new Date(0).toString();
      document.cookie = this.children[1].innerHTML + "=; expires=" + time;
      console.log(this.remove());
    })	

  };