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+"')")
	
}

 

  • 4
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值