JavaScript自动增减表格行
最近正在自学JavaScript，在当今互联网这样一个富客户端时代,个人感觉如果走Web开发前端技术必须要有所了解！！！
-----------------------------------------------------------------------------------------------------------------------------------------
1.下面是自己闲来无事,并且把最近学习到的一些知识做的一个小小的东西，本来不想拿出来晒(还是觉得太简单了的缘故)！但是有时候想想,虽说自己还是个菜鸟,
但是还是得鼓足勇气迈出第一步,向园区的大牛们一步步接近！希望大牛们看到后不喜勿喷！！！！
2.程序所用技术：
2.1使用insertRow(),insertCell(),deleteRow()等函数实现表格行列的增减;
2.2通过oTable.rows.length这样的特性获取当前表格的行数,从而使用for()循环来自动实现表格操作
2.3在单元格中使用appendChild()方法添加内容
2.4使用createElement()方法创建节点元素
3.程序思路：
3.1点击页面链接--->页面弹出输入框
3.2输入数字,点击确定--->程序通过判断,生成相应数量的行
4.HTML页面源码
<html> <head> <meta charset="utf-8"> <title>动态生成表格</title> <script type="text/javascript" src="js/quick.js"></script> </head> <body onload="Test()"> <a id="clickId">点击我</a> <table id="tableId" border="1"> </table> </body> </html>
5.JS源码
function Test() { /** * @todo 获取按钮对象 */ var oButton = document.getElementById("clickId"); /** * @todo 以DOM标准为按钮添加事件处理函数 */ oButton.addEventListener("click", createTable, false); }; function createTable() { var strNum = prompt("请输入要生成的空白行数",""); if(strNum === "" || strNum === undefined) { return; } /** * 获取table元素 */ var oTable = document.getElementById("tableId"); //获取当前表的行数 var iCurr_str = oTable.rows.length; /** * @todo 根据输入的数字动态生成相应的空白行数 */ if(iCurr_str > 2 && (parseInt(strNum) - (iCurr_str - 2)) > 0) { oTable.deleteRow(iCurr_str-1); /** * @todo 在原基础上增加行 */ for(var i=(iCurr_str-2), trLength=parseInt(strNum); i<trLength; i++) { /** * @todo 创建一个input元素,并且为其添加特性 */ var oInput = document.createElement("input"); oInput.type = "text"; //插入第i+1行 oTable.insertRow(i); //插入第i+1行的第0列 oTable.rows[i].insertCell(0); //在第0列插入oInput oTable.rows[i].cells[0].appendChild(oInput); /** * @todo 创建<select>元素 */ var oSelect = document.createElement("select"); /** * 创建<option>元素,并且为其设值 */ var oPtion1 = document.createElement("option"); oPtion1.appendChild(document.createTextNode("江西")); var oPtion2 = document.createElement("option"); oPtion2.appendChild(document.createTextNode("湖南")); /** * @todo 将option元素加入到select元素中 */ oSelect.appendChild(oPtion1); oSelect.appendChild(oPtion2); //插入第2列 oTable.rows[i].insertCell(1); oTable.rows[i].cells[1].appendChild(oSelect); } } else if(iCurr_str > 2 && (parseInt(strNum) - (iCurr_str - 2)) < 0) { /** * @todo 在原基础上删除行 */ oTable.deleteRow(iCurr_str-1); for(var i=(iCurr_str-2), delLength=parseInt(strNum); i>delLength; i--) { oTable.deleteRow(i); } if(oTable.rows.length === 1) { oTable.deleteRow(0); return; } } else if(iCurr_str === 0) { /** * 创建表头 */ oTable.insertRow(0); oTable.rows[0].insertCell(0); oTable.rows[0].cells[0].appendChild(document.createTextNode("姓名")); oTable.rows[0].insertCell(1); oTable.rows[0].cells[1].appendChild(document.createTextNode("籍贯")); for(var i=1, trLength=parseInt(strNum); i<=trLength; i++) { /** * @todo 创建一个input元素,并且为其添加特性 */ var oInput = document.createElement("input"); oInput.type = "text"; //插入第i+1行 oTable.insertRow(i); //插入第i+1行的第0列 oTable.rows[i].insertCell(0); //在第0列插入oInput oTable.rows[i].cells[0].appendChild(oInput); /** * @todo 创建<select>元素 */ var oSelect = document.createElement("select"); /** * 创建<option>元素,并且为其设值 */ var oPtion1 = document.createElement("option"); oPtion1.appendChild(document.createTextNode("江西")); var oPtion2 = document.createElement("option"); oPtion2.appendChild(document.createTextNode("湖南")); /** * @todo 将option元素加入到select元素中 */ oSelect.appendChild(oPtion1); oSelect.appendChild(oPtion2); //插入第2列 oTable.rows[i].insertCell(1); oTable.rows[i].cells[1].appendChild(oSelect); } } else { return; } //计算当前行数 var trSize = oTable.rows.length; /** * @todo 创建一个按钮 */ var oSubmit = document.createElement("input"); oSubmit.id = "submitId"; oSubmit.type = "button"; oSubmit.value = "提交"; /** * @todo 在最后一行加入一个按钮 */ oTable.insertRow(trSize); //合并两列 oTable.rows[trSize].colspan = "2"; oTable.rows[trSize].insertCell(0); oTable.rows[trSize].cells[0].appendChild(oSubmit); /** * @todo 将表格加入到DOM文档上,并且显示出来 */ document.body.appendChild(oTable); };
-----------------------------------------------------------------------------------------------------------------------------------------
后记：学习需要总结与交流！！坚持不懈，每天进步一点点！！
