JS-表单案例

---

一、表单增加功能

1. 获取要操作的表格。
2. 开始增加行：增加的行的位置在表格的倒数第二行，下标：总行数-1。空行
3. 获取表格行目前的最大下标
4. 给新增加的行对象 newRow添加 id属性
5. 往空行里面增加4个列

// 1.获取要操作的表格。
			var myTable = document.getElementById("order");
			// 增加行
			function addRow(){
				// 2.开始增加行：增加的行的位置在表格的倒数第二行，下标：总行数-1。空行
				// 获取表格行目前的最大下标
				var rowIndex = myTable.rows.length-1;
				var newRow = myTable.insertRow(rowIndex);// 目前是空行
				// 给新增加的行对象 newRow添加 id属性
				newRow.setAttribute("id",rowIndex);// 把新增加的行的下标赋给该行的id属性
				// 3.往空行里面增加4个列/单元格
				// 第1个单元格
				var c0 = newRow.insertCell(0);
				c0.innerHTML = "<input type='text'/>";
				// 第2个单元格
				var c1 = newRow.insertCell(1);
				c1.innerHTML = "<input type='text' style='width:30px'/>";
				// 第3个单元格
**加粗样式**				var c2 = newRow.insertCell(2);
				c2.innerHTML = "<input type='text' style='width:30px'/>";
				// 第4个单元格
				var c3 = newRow.insertCell(3);
				c3.innerHTML = "<input type='button' value='删除' οnclick=\"delRow("+newRow.id+")\"/>&nbsp;"+
								"<input type='button' value='确定' οnclick=\"qd("+newRow.id+")\"/>";
			}

二、表单删除功能

• 获取要操作的表格。
• 通过行id获取行对象。
• 获取行下标
• 开始删除行

                     // 删除行
				function delRow(rid){//参数：当前操作行的id属性
					// 1.通过行id获取行对象。
					var myRow = document.getElementById(rid);
					// 2.获取行下标
					var rindex = myRow.rowIndex;
					// 3.开始删除行
					myTable.deleteRow(rindex);
				}

三、表单修改功能

1. 获取要操作的行，通过行id
2. 获取单元格的内容并赋给一个文本框，最后将文本框赋给单元格。
3. 修改按钮变为确定钮，修改按钮的 value属性值。操作的是第4列/单元格里面的最后一个子节点
4. 再次调用确定方法

                    // 修改行
				function update(rid){//参数：当前操作行的id属性
					// 1.获取要操作的行，通过行id
					var myRow = document.getElementById(rid);
					// 2.获取单元格的内容并赋给一个文本框，最后将文本框赋给单元格。
					// 获取当前行的所有单元格，返回的是一个存储单元格的数组
					var cs = myRow.cells;
					// 第1个单元格
					// 获取第1个单元格里面的内容
					var c0 = cs[0].innerHTML;
					console.info(c0);
					//将单元格的内容赋给一个文本框,并将文本框赋给单元格
					cs[0].innerHTML = "<input type='text' value="+c0+" />";
					
					// 第2个单元格
					// 获取第2个单元格里面的内容
					var c1 = cs[1].innerHTML;
					//将单元格的内容赋给一个文本框,并将文本框赋给单元格
					cs[1].innerHTML = "<input type='text' style='width:30px' value="+c1+" />";
					
					// 第3个单元格
					// 获取第3个单元格里面的内容
					var c2 = cs[2].innerHTML;
					//将单元格的内容赋给一个文本框,并将文本框赋给单元格
					cs[2].innerHTML = "<input type='text'  style='width:30px' value="+c2+" />";
					// 3.修改按钮变为确定钮，修改按钮的 value属性值。操作的是第4列/单元格里面的最后一个子节点
					cs[3].lastChild.value="确定";
					// 4.再次调用确定方法
					cs[3].lastChild.setAttribute("onclick","qd('"+rid+"')")
					}

四、表单确定功能

1. 获取要操作的行，通过行id
2. 获取当前行的所有单元格，返回的是一个存储单元格的数组
3. 获取当前三个单元格里面文本框的内容，并把文本框的内容赋给单元格数组
4. 确定按钮变为修改按钮，修改按钮的 value属性值。操作的是第4单元格
5. 当按钮变为修改的是时候，给修改按钮添加鼠标点击事件，并且调用修改方法

function qd(rid){//参数：当前操作行的id属性
				// 1.获取要操作的行，通过行id
				console.info("rid = "+rid);
				var myRow = document.getElementById(rid);
				// 2.获取当前行里面前三个单元格里面文本框的内容，并把文本框的内容赋给单元格
				// 获取当前行的所有单元格，返回的是一个存储单元格的数组
				var cs = myRow.cells;
				// 第1个单元格
				// 获取单元格里面文本框的值
				var c0 = cs[0].firstChild.value;
				// 将获取的文本框的值赋给第1个单元格
				cs[0].innerHTML = c0;
				
				// 第2个单元格
				// 获取单元格里面文本框的值
				var c1 = cs[1].firstChild.value;
				// 将获取的文本框的值赋给第2个单元格
				cs[1].innerHTML = c1;
				
				// 第3个单元格
				// 获取单元格里面文本框的值
				var c2 = cs[2].firstChild.value;
				// 将获取的文本框的值赋给第3个单元格
				cs[2].innerHTML = c2;
				// 3.确定按钮变为修改按钮，修改按钮的 value属性值。操作的是第4列/单元格
				cs[3].lastChild.value="修改";
				// 当按钮变为修改的是时候，给修改按钮添加鼠标点击事件，并且调用修改方法
				cs[3].lastChild.setAttribute("onclick","update('"+rid+"')")
			}

---