目录
一,增加订单的方法
思路:
第一步:获取要操作的表格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+")\"/> "+
"<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+"')")
}