<!DOCTYPE html>
<html>
<style>
table, th, td {
  border:1px solid black;
}
</style>
<body>

<div id="message"></div>

<h2>HTML table</h2>

<form action="javascript:void(0);" id="frmdata" onsubmit="submitFormData()">

<table>
  <tr>
   <?php
	
	$array_val = array("A", "B", "C" );

	for ($i = 0; $i <= count($array_val)-1; $i++) 
	{
		echo  "<th>" .$array_val[$i] ."</th>";
	}
?>	
  </tr>
  
  <!--<tr> -->
<?php	

	for($row=0;$row<7;$row++)
	{
?>
		<tr>
<?php		
		for($col=0;$col <= count($array_val)-1;$col++)
		{
			$indice_row = $row+1;
			$indice_col = $col+1;

			$indice = "col".$indice_col ."-" ."row".$indice_row ; 
?>			
			<td><input type="text" name = "<?php echo $indice; ?>"  id="<?php echo $indice; ?>" /></td>
<?php
		}	
?>
		</tr>
<?php		
	}
?>
  
</table>

<button type="submit">Submit</button>
</form>


<p id="display_text"></p>

<script>

function submitFormData() 
{
			
			// OK
			//var element = "col1-row1";
			//champ = document.getElementById(element).value;
			//alert("plouf " + champ );
			
			let text = "";
			
			var tableau = new Array();
			
			
			for (let i = 0; i < 3; i++)
			{
				var array_col = new Array(7);
			
				for (let j = 0; j < 7; j++)
				{
					var col = i + 1;
					var row = j + 1;
					var indice = "col" + col + "-" + "row" + row;
					
					champ_valeur = document.getElementById(indice).value;
					text += champ_valeur + "<br>";
					
					array_col[j] = champ_valeur;
					
					//text += indice + "<br>";
				}
				
				tableau[i] = array_col; 
				
			}
			
			//document.getElementById("display_text").innerHTML = text;
			
			document.getElementById("display_text").innerHTML = "Voici le tableau au format string " + tableau.toString();
			
			
			
			const cars = ["Saab", "Volvo", "BMW"];
			document.getElementById("message").innerHTML = cars;
			
			
			if (window.XMLHttpRequest) 
			{
				xmlhttp = new XMLHttpRequest();
			}
			else 
			{	
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
			
			var JsonString = JSON.stringify(tableau);
			xmlhttp.onreadystatechange = respond;
			xmlhttp.open("POST", "envoi_json.php", true);
			xmlhttp.send(JsonString);
			
}

function respond() 
{
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById('result').innerHTML = xmlhttp.responseText;
        }
    }

</script>

<div id="result"></div>

</br>
</br>
</br>



</body>
</html>
