JavaScript(订单的增删改)

目录

一，增加订单的方法

二，删除订单功能

 三，确认按钮功能

四，修改功能

---

一，增加订单的方法

思路：

第一步：获取要操作的表格id

第二步：根据表格id开始增加行 并且要传插入到指定的下标

第三步：给新增行设置id

第四步：给新增行添加单元格

第五步：给单元格赋值

/* 增加订单方法 */
function f1(){
	/* 要增加表格的编号 */
	var a=document.getElementById("a");
	/* 获取表格的总行数/最大下标 */
	var c=a.rows.length-1;
	/* 增加行*/
	var b=a.insertRow(c);/* 传要增加第几行 */
	/* 给新增的一行添加id */
	b.setAttribute("id",c);
	//console.info(b)
	/* 给新的一行添加第一个单元格 */
	var b1=b.insertCell(0);
	/* 给新的一行添加第二个单元格 */
	var b2=b.insertCell(1);
	/* 给新的一行添加第三个单元格 */
	var b3=b.insertCell(2);
	/* 给新的一行添加第四个单元格 */
	var b4=b.insertCell(3);
	/* 给单元格赋值 文本框/按钮 */
	b1.innerHTML="<input type='text' style='width: 100px;' />"
	b2.innerHTML="<input type='text' style='width: 50px;' />"
	b3.innerHTML="<input type='text' style='width: 60px;' />"
	b4.innerHTML="<input type='button'  value='删除' onclick=\"f2("+b.id+")\"/>&nbsp;"+
						"<input type='button'  value='确认' onclick=\"f3("+b.id+")\"/>"
}

二，删除订单功能

思路：

第一步：获取要操作的行id

第二步：根据行id获取行下标

第三步：获取要操作的表格id

第四步：根据表格id删除行下标 

/* 删除的功能 */
function f2(rid){/* 传要删除的行id */
	/* 要删除行的编号 */
	var a=document.getElementById(rid);
	/* 获取改行的下标 */
	var b=a.rowIndex;
	/* 获取要删除改行的表格编号 */
	var c=document.getElementById("a");
	/* 开始删除 */
	c.deleteRow(b);
}

 三，确认按钮功能

思路：

第一步：获取要操作该行的id

第二步：根据获取的id获取行的所有的单元格

第三步：获取单元格下标的值

第四步：赋值 然后给最后下标的单元格最后的子标签添加onclick事件

/* 确认按钮功能 */
function f3(rid){/* 传入该行的编号 */
	/* 获取要操作的改行的编号 */
	var a=document.getElementById(rid);
	/* 获取改行的所有单元格 */
	var b=a.cells;
	/* 获取该下标的值 */
	var b0=b[0].firstChild.value;
	var b1=b[1].firstChild.value;
	var b2=b[2].firstChild.value;
	/* 赋值 */
	b[0].innerHTML=b0;
	b[1].innerHTML=b1;
	b[2].innerHTML=b2;
	/* 给最后的按钮赋值修改 */
	b[3].lastChild.value="修改";
	/* 调用修改的事件 */
	b[3].lastChild.setAttribute("onclick","f4('"+rid+"')")
	
}

四，修改功能

思路：

第一步：获取要操作的行id

第二步：获取改行的所有单元格

第三步：获取该所有单元格下标的值

第四步：开始赋值  然后给最后下标的单元格最后的子标签添加onclick事件

/* 修改功能 */
function f4(rid){/* 传要操作的行编号 */
	/* 要操作的该行编号 */
	var a=document.getElementById(rid);
	/* 获取该行的下标总数 */
	var b=a.cells;
	/* 获取改下标的值 */
	var b0=b[0].innerHTML;
	var b1=b[1].innerHTML;
	var b2=b[2].innerHTML;
	/* 开始赋值 */
	b[0].innerHTML="<input type='text' style='width:100px;' value="+b0+">"
	b[1].innerHTML="<input type='text' style='width:50px;'  value="+b1+">"
	b[2].innerHTML="<input type='text' style='width:60px;'  value="+b2+">"
	/* 给最后一个单元格最后一个子标签赋值 */
	b[3].lastChild.value="确认";
	b[3].lastChild.setAttribute("onclick","f3('"+rid+"')")
	
}

---