tutorial 01 - potatoscript/javascript GitHub Wiki

home

index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css?v=5" />
    <title>Web App Basic</title>
</head>
<body>
    Name : <input type="text" id="name" value="-" />
    <span style="margin-left:10px;"/>
    Age  : <input type="text" id="age" value="-" />
    <span style="margin-left:30px;"/>
    <button id="add" onclick="Add()" >Add</button>
    <br><br>
    Table 1:
    <div id="table1"></div>
    <script src="site.js?v=13"></script>	
</body>
</html>

home

site

var a = [];
window.onload=function(){
  table("data.php","array_data="+a+"&id=0","table1");
}
	
function ResponsePost(Omodel,param,callback){
	var params = typeof param == 'string' ? param : Object.keys(param).map(
			 function(k){ return encodeURIComponent(k) + '=' + encodeURIComponent(param[k]) }
	 ).join('&');
	var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
	var a = xhr.open('POST', Omodel);
	xhr.onreadystatechange = function() {
		if (xhr.readyState>3 && xhr.status==200) {
			callback(xhr.responseText);
		}
	};
	xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"),
	xhr.setRequestHeader("Chartset","UTF-8"),
	xhr.send(params);
	return xhr;
};

function table(model,param, div){
	return ResponsePost(model,param,function(data){
		var	t = "<table class='potato-list-table' id='list' >";
		var i=JSON.parse(data);
		var o=0;
		t+="<tr>";
		for(var e in i[0]){
				if(i[0][e]!="")
				t+="<th class='locked_top' style='border:1px solid black;top:0px;position:relative'>"+i[0][e]+"</th>";
				else
				t+="<th style='display:none'>"+i[0][e]+"</th>";
				o++;
		}
		t+="</tr>";
		for(var n in i){
			if("undefined" != i[n][0] && null != i[n][0] && n>0){
				t+="<tr>";
				for(var s=0;s<o;s++){
					if(i[0][s]!=""){
						t+="<td>"+i[n][s]+"</td>";
					}
					else
					t+="<td style='display:none'>"+i[n][s]+"</td>";
				}
				t+="</tr>"
			}
		}
		t+="</table>";
		document.getElementById(div).innerHTML = t;
	});

}


function Delete(id){
   a.push(id);
   table("data.php","array_data="+a+"&id="+id,"table1");
}

*Improved version

var a_name =[];
var a_age =[];
var del=[];
window.onload=function(){
  Read();
}
	
function ResponsePost(Omodel,param,callback){
	var params = typeof param == 'string' ? param : Object.keys(param).map(
			 function(k){ return encodeURIComponent(k) + '=' + encodeURIComponent(param[k]) }
	 ).join('&');
	var xhttp = new XMLHttpRequest();
	xhttp.open('POST', Omodel);
	xhttp.onreadystatechange = function() {
		if (xhttp.readyState==4 && xhttp.status==200) {
			callback(xhttp.responseText);
		}
	};
	xhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"),
	xhttp.setRequestHeader("Chartset","UTF-8"),
	xhttp.send(params);
	return xhttp;
};

function table(model,param, div){
	return ResponsePost(model,param,function(data){
		var	t = "<table class='potato-list-table' id='table' >";
		var i=JSON.parse(data);
		var o=0;
		t+="<tr>";
		for(var e in i[0]){
				if(i[0][e]!="")
				t+="<th>"+i[0][e]+"</th>";
				else
				t+="<th style='display:none'>"+i[0][e]+"</th>";
				o++;
		}
		t+="</tr>";
		for(var n in i){
			if("undefined" != i[n][0] && null != i[n][0] && n>0 && i[n][1]!="" ){
				t+="<tr>";
				for(var s=0;s<o;s++){
					if(i[0][s]!=""){
						t+="<td>"+i[n][s]+"</td>";
					}
					else
					t+="<td style='display:none'>"+i[n][s]+"</td>";
				}
				t+="</tr>"
			}
		}
		t+="</table>";
		document.getElementById(div).innerHTML = t;
		
		var rows = document.getElementById("table").rows;
		for (i = 0; i < rows.length; i++) {
			rows[i].onclick = function(){ return function(){
				 document.getElementById("name").value = this.cells[1].innerHTML;
				 document.getElementById("age").value = this.cells[2].innerHTML;
			};}(rows[i]);
		}
	});
}

function Add(){
	var name_ = document.getElementById("name").value;
    var age_ = 	document.getElementById("age").value;
	a_name.push(name_);
	a_age.push(age_);
	Read();
}

function Delete(id){
   del.push(id);
   Read();
}

function Read(){
	table("data.php","name="+a_name+"&age="+a_age+"&del="+del,"table1");
	document.getElementById("name").value = "-";
	document.getElementById("age").value = "-";
}

home

data

<?php

$datalist=array();
$data=array();

$array_d = explode(',',$_POST['array_data']);
$id = $_POST['id'];

$data[0]="No";
$data[1]="Name";
$data[2]="Age";
$data[3]=" ";
array_push($datalist,$data);

$array = array("Volvo", "BMW", "Toyota");
$n =1;
foreach ($array as $value) {
	
	if (!in_array($n, $array_d))
	{
	  $data[0]=$n;
		$data[1]=$value;
		$data[2]="30";
		$data[3]='<svg onclick="Delete('.$n.')" xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
		  <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
		  <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
		</svg>';
		array_push($datalist,$data);
	}
	
	$n++;
}
echo json_encode($datalist);

?>

home

style

body {
  margin-top: 50px;
  margin-left: 50px;
  font-family:arial;
  font-size:15px;
}
button{
	height:30px;
	width:80px;
	font-size:13px;
}
input{
	height:25px;
	width:100px;
	font-size:13px;
	border-radius:5px;
	text-align:center;
	background-color:lightyellow;
}
#table {
  border-collapse: collapse;
  margin-top: 5px;
}
#table th {
  border: 1px solid black;
  padding-left: 15px;
}
#table td {
  border: 1px solid black;
  padding-left: 15px;
}
#table tr:nth-child(even) th {
  background: #c5e9ff;
}
#table tr:nth-child(odd) td {
  background: lightyellow;
}
#table tr:hover td {
  background: pink;
  cursor: pointer;
}

home

⚠️ **GitHub.com Fallback** ⚠️