<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Untitled Document </title>
<body>
<table width= "border=" 1 "id=" TB1 ">
<tr>
<td> Product Name </td>
<td> Quantity </td>
<td> Price </td>
<td> Operations </td>
</tr>
<tr>
<td> Shoes a</td>
<td>10</td>
<td>99</td>
<td><input type= "button" name= "button" id= "button" value= "delete" onclick= "del (This)"/>
<input type= "button" Name= "Button2" id= "Button2" value= "Modify" onclick= "edit (This)"/>
<input type= "button" Name= "Button3" id= "Button3" value= "OK" onclick= "OK (This)" style= "Display:none"/>
<input type= "button" Name= "Button4" id= "Button4" value= "Cancel" onclick= "Cancel" style= "Display:none"/></ Td>
</tr>
<tr>
<td> Shoes b</td>
<td>20</td>
<td>99</td>
<td><input type= "button" name= "button" id= "button" value= "delete" onclick= "del (This)"/>
<input type= "button" Name= "Button2" id= "Button2" value= "Modify" onclick= "edit (This)"/>
<input type= "button" Name= "Button3" id= "Button3" value= "OK" onclick= "OK (This)" style= "Display:none"/>
<input type= "button" Name= "Button4" id= "Button4" value= "Cancel" onclick= "Cancel" style= "Display:none"/></ Td>
</tr>
<tr>
<td> Shoes c</td>
<td>30</td>
<td>99</td>
<td><input type= "button" name= "button" id= "button" value= "delete" onclick= "del (This)"/>
<input type= "button" Name= "Button2" id= "Button2" value= "Modify" onclick= "edit (This)"/>
<input type= "button" Name= "Button3" id= "Button3" value= "OK" onclick= "OK (This)" style= "Display:none"/>
<input type= "button" Name= "Button4" id= "Button4" value= "Cancel" onclick= "Cancel" style= "Display:none"/></ Td>
</tr>
<tr>
<td> Shoes d</td>
<td>40</td>
<td>99</td>
<td><input type= "button" name= "button" id= "button" value= "delete" onclick= "del (This)"/>
<input type= "button" Name= "Button2" id= "Button2" value= "Modify" onclick= "edit (This)"/>
<input type= "button" Name= "Button3" id= "Button3" value= "OK" onclick= "OK (This)" style= "Display:none"/>
<input type= "button" Name= "Button4" id= "Button4" value= "Cancel" onclick= "Cancel" style= "Display:none"/></ Td>
</tr>
<tr>
<td> Shoes e</td>
<td>50</td>
<td>99</td>
<td><input type= "button" name= "button" id= "button" value= "delete" onclick= "del (This)"/>
<input type= "button" Name= "Button2" id= "Button2" value= "Modify" onclick= "edit (This)"/>
<input type= "button" Name= "Button3" id= "Button3" value= "OK" onclick= "OK (This)" style= "Display:none"/>
<input type= "button" Name= "Button4" id= "Button4" value= "Cancel" onclick= "Cancel" style= "Display:none"/></ Td>
</tr>
</table>
<table>
<tr>
<td> Product Name </td>
<td><input id= "Name"/></td>
</tr>
<tr>
<td> Quantity </td>
<td><input id= "CNT"/></td>
</tr>
<tr>
<td> Price </td>
<td><input id= "Price"/></td>
</tr>
</table>
<button onclick= "Add ();" > Add </button>
<script>
//Increase
function Add () {
var name=getel ("name"). Value;
Getel ("name"). value= "";
var Cnt=getel ("CNT"). Value;
Getel ("cnt"). value= "";
var Price=getel ("Price"). Value;
Getel ("Price"). value= "";
var html= ' <tr>\
<td> ' +name+ ' </td>\
<td> ' +cnt+ ' </td>\
<td> ' +price+ ' </td>\
<td><input type= "button" name= "button" id= "button" value= "delete" onclick= "del (This)"/>\
<input type= "button" Name= "Button2" id= "Button2" value= "Modify" onclick= "edit (This)"/>\
<input type= "button" Name= "Button3" id= "Button3" value= "OK" onclick= "OK (this)" \ style= "Display:none"/>\
<input type= "button" Name= "Button4" id= "Button4" value= "Cancel" onclick= "Cancel (this)" \ style= "Display:none"/> </td>\
</tr> ';
var tbody=getels (TB, "tbody") [0];
var h=tbody.innerhtml;
tbody.innerhtml=h+html;
}
</script>
<script>
function Getel (ID) {return document.getElementById (ID);}
function Getels (obj,tag) {return obj.getelementsbytagname (tag);}
var Tb=getel ("Tb1");
// Delete
function del (BTN) {
var Td=btn.parentnode;
var Tr=td.parentnode;
//alert (tr.innerhtml);
//alert (tr.outerhtml);
//alert (tr.innertext);
var index=tr.rowindex;//get line number
Tb.deleterow (index);
}
// Modify
function Edit (BTN) {
var Td=btn.parentnode;
var Tr=td.parentnode;
var Oldcnt=tr.cells[1].innertext;
td.xxx=oldcnt;
//alert (oldcnt);
tr.cells[1].innerhtml= "<input value= '" +oldcnt+ ">";//change content to text box
//Hide Edit
btn.style.display= "None";
var btns=getels (TD, "Input");//Find all the buttons in the same TD
btns[2].style.display= "";
btns[3].style.display= "";
}
// OK
function ok (btn) {
var Td=btn.parentnode;
var Tr=td.parentnode;
var txttd=tr.cells[1];//the TD where the text box is located
var txt=getels (txttd, "input") [0];//Find text Box
var cnt=txt.value;
txttd.innertext=cnt;
var btns=getels (TD, "Input");//Find all the buttons in the same TD
btns[1].style.display= "";
btns[2].style.display= "None";
btns[3].style.display= "None";
}
// cancel
function Cancel (btn) {
var Td=btn.parentnode;
var Tr=td.parentnode;
var txttd=tr.cells[1];//the TD where the text box is located
txttd.innertext=td.xxx;//Original Quantity
var btns=getels (TD, "Input");//Find all the buttons in the same TD
btns[1].style.display= "";
btns[2].style.display= "None";
btns[3].style.display= "None";
}
</script>
</body>
Ok delete Modify Cancel