php ajax生成表格,Ajax + PHP 表格生成器

说明：

Ajax提交html页面表单，生成表格。

运行效果：

示例源码：

HTML页面：html>

表格生成器

Ajax+PHP生成表格

请输入行数：

请输入列数：

生成

---

var btnValidateValidate = document.getElementById('btnGenerate');

btnValidateValidate.onclick = function () {

//        console.log(typeof btnValidateValidate);

//        console.log(phoneNumber.value)

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {

if(xhr.readyState == 4 && xhr.status == 200)

{

var result = xhr.responseText;

var h2 =document.getElementById('result');

h2.innerHTML = result;

}

}

var rowNumber = document.getElementById('rowNumber');

var columnNumber = document.getElementById('columnNumber');

var data = '?rowNumber='+rowNumber.value + '&columnNumber='+columnNumber.value;

xhr.open('get','generateTable.php'+data, true);

xhr.send(null);

}

PHP页面(generateTable.php)<?php

$rowNumber = isset($_GET['rowNumber']) ? $_GET['rowNumber'] : null;

$columnNumber = isset($_GET['columnNumber']) ? $_GET['columnNumber'] : null;

if ($rowNumber !== null && $columnNumber !== null) {

$result = '';

$result .= '

$result .= "

$rowNumber". "×" ."$columnNumber 表格";

for($i= 1;$i <=$rowNumber; $i++)//生成行

{

$result .= '

';//行开始

for($j=1; $j<=$columnNumber; $j++)//生成列

{

$result .= '

';

$result .='  ';

$result .= '

';

}

$result .= '

';//行结束

}

$result .= '

';

echo $result;

}