/*
* 创建一个空表格
* 1、点击按钮添加一行
* 2、点击按钮添加一列
* 3、一个文本输入框输入行的值，一个文本输入框输入列的值，一个文本输入框输入要修改的值，一个修改按钮
* 对前两个输入框输入的值进行限制，只能是数字，并且长度不能超过三位，输入的值不能超过现有表格的行和列的值
* */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--创建空表格按钮-->
<input type="button" value="创建一个空表格" onclick="createTable()">
<!--添加行按钮-->
<input type="button" value="添加一行" onclick="addRow()">
<!--添加列按钮-->
<input type="button" value="添加一列" onclick="addCell()"><br>
<!--输入要修改的行号-->
<input id="inputRow" type="text" maxlength="3">
<!--输入要修改的列-->
<input id="inputCell" type="text" maxlength="3">
<!--通过行号和列号定位到的单元格，输入修改后的内容-->
<input id="inputContent" type="text">
<!--修改按钮-->
<input type="button" value="修改" onclick="update()">
<!--一个空的DIV盒子，用来装表格-->
<div id="newDiv">
</div>
<script>
/*
* 在div中创建一个空表格
* */
function createTable(){
var div =document.getElementById("newDiv");
var table=document.createElement("table");
table.id="newTable";
table.border=1;
div.appendChild(table);
}
/*
* 通过按钮添加行
* */
function addRow(){
//通过ID获取表格
var table=document.getElementById("newTable");
//获得表格的所有行集合数组
var row=table.rows;
/*
* 1、如果是第一次点击添加行按钮，则直接添加一个单元格
* 2、如果不是第一次，则获取第一行的列的长度。然后循环添加单元格
* */
if(row.length>0){
var tr=document.createElement("tr");
for(var i=0;i<row[0].cells.length;i++){
var td=document.createElement("td");
td.innerHTML="元素"+(i+1);
tr.appendChild(td);
}
table.appendChild(tr);
}else{
var tr=document.createElement("tr");
var td=document.createElement("td");
td.innerHTML="元素1";
tr.appendChild(td);
table.appendChild(tr);
}
}
/*
* 通过按钮添加列
* */
function addCell(){
//添加列
//通过ID获取表格
var table=document.getElementById("newTable");
//获取表格的所有行集合数组
var row=table.rows;
/*
* 1、如果是第一次点击添加列按钮，则直接添加一个单元格
* 2、如果不是第一次点击，则在每一行的后面循环添加单元格
* */
if(row.length>0){
for(var i=0;i<row.length;i++){
var td=document.createElement("td");
td.innerHTML="元素"+(i+1);
row[i].appendChild(td);
}
}else{
var tr=document.createElement("tr");
var td=document.createElement("td");
td.innerHTML="元素1";
tr.appendChild(td);
table.appendChild(tr);
}
}
//动态修改表格中单元格的内容
function update() {
var table=document.getElementById("newTable");
var line=document.getElementById("inputRow");
var cell=document.getElementById("inputCell");
var content=document.getElementById("inputContent");
if(line.value==""){
alert("请输入行的值");
return;
}
if(cell.value==""){
alert("请输入列的值");
return;
}
if(content.value==""){
alert("请输入要修改的内容");
return;
}
if(isNaN(line.value)){
alert("行的值请输入数字");
}
if(isNaN(cell.value)){
alert("列的值请输入数字");
}
var table=document.getElementById("newTable")
var row=table.rows;
if(line.value>row.length){
alert("输入的行值超过范围，请重新输入");
return;
}
var cellNum=table.rows[0].cells;
if(cell.value>cellNum.length){
alert("输入的列的值超过范围，请重新输入");
return;
}
table.rows[line.value-1].cells[cell.value-1].innerHTML=content.value;
}
</script>
</body>
</html>
