题目：在游览器中输出大小为10 x 10的表格，页面效果如下图
jsp代码：
addrow按钮可以增加一行 addcol按钮可以增加一列 display按钮直接增加15列10行，输出作业要求的表格 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>printForm</title> <script type="text/javascript" src="1.js" charset="utf-8"> </script> </head> <body> <form> <table border="1" style="border-color:blue" align="center" id="tid"> <tr> <td>1</td> </tr> </table> <input type="button" value="display" onclick="f()"/> <input type="button" value="addrow" onclick="addrow()"/> <input type="button" value="addcol" onclick="addcol()"/> </form> </body> </html>下面是js代码。
这里参考了常用的表格操作函数： var tab=document.getElementById("objectClassTab");//获得表格 var head = tab.getElementsByTagName("thead")[0];//获取head var trhead = head.getElementsByTagName("tr")[0];//获取第一行 var headlen=head.getElementsByTagName('th').length;//获取列的总数 var thhead = head.getElementsByTagName("th")[headlen];//表头尾部追加一列 var colsNum=tab.rows.item(0).cells.length; //表格的列数 var num=tab.rows.length;//表格当前的行数 var th = document.createElement("th");//创建列的头不 参考：https://blog.csdn.net/beautiful20100708/article/details/47024353 var count=1; function addrow(){ var t=document.getElementById("tid"); var lastr=document.getElementsByTagName("tr")[0]; var newtr=document.createElement("tr"); for(var i=0;i<t.rows.item(0).cells.length;i++){ var newtd=document.createElement("td"); newtd.innerHTML=parseInt(t.rows.item(0).cells[i].innerHTML)*parseInt(t.rows.length+1);//第一行的值乘以行数 newtr.appendChild(newtd); } t.appendChild(newtr); } function addcol(){ var t=document.getElementById("tid"); if(t.rows.length==0) { alert("No table exist"); return false; } count++; for(var i=0;i<t.rows.length;i++){ var curtr=document.getElementsByTagName("tr")[i]; var newtd=document.createElement("td"); newtd.innerHTML=count*(i+1);//列的每一个值等于第一个单元格的值*(i+1) curtr.appendChild(newtd); } } function f(){ for(var i=1;i<15;i++) addcol(); for(var i=1;i<10;i++) addrow(); }