/* * 创建一个空表格 * 1、点击按钮添加一行 * 2、点击按钮添加一列 * 3、一个文本输入框输入行的值，一个文本输入框输入列的值，一个文本输入框输入要修改的值，一个修改按钮 * 对前两个输入框输入的值进行限制，只能是数字，并且长度不能超过三位，输入的值不能超过现有表格的行和列的值 * */<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--创建空表格按钮--> <input type="button" value="创建一个空表格" οnclick="createTable()"> <!--添加行按钮--> <input type="button" value="添加一行" οnclick="addRow()"> <!--添加列按钮--> <input type="button" value="添加一列" οnclick="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="修改" οnclick="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>
