html页面临时数据的增删改查. 订单操作（二）

html页面临时数据的增删改查. 订单操作（二） 优点不需要与后台交互，缺点用js处理临时数据时，不能刷心页面，否则数据会丢失 订单修改:db已有的行数和新增的行数区别(已有的存在行号) <;input type=";hidden"; name=";is_deleted"; id=";line_delete";>; <;input type=";hidden"; name=";itemLines"; id=";itemLines";>; <;input type=";hidden"; name=";rq_id"; value=";<;?php echo $request->;getParameter('rq_id'); ?>;";>; <;table width=";100%"; border=";0"; cellspacing=";0"; cellpadding=";0"; class=";listblock";>; <;tr class=";listblocktr";>; <;td>;序号<;/td>; <;td>;料号<;/td>; <;td>;品名<;/td>; <;td>;模号<;/td>; <;td>;Building<;/td>; <;td>;码头<;/td>; <;td>;供应商<;/td>; <;td align=";right";>;数量<;/td>; <;td>;备注<;/td>; <;td>;操作<;/td>; <;/tr>; <;?php foreach($requireInfo['m_require_item'] as $key =>;$line){ $lineNo = $key+1; $stock_code = str_replace(array(";， ";,";,";),";<;br>;";,$line['stock_codes']); ?>; <;tr id=";db_line_<;?php echo $lineNo;?>;"; >; <;td>;<;span id=";html_line_<;?php echo $lineNo;?>;";>;<;?php echo $lineNo;?>;<;/span>; <;span style=";display:none";>; <;input type=";text"; name=";rq_item_id_<;?php echo $lineNo;?>;"; id=";rq_item_id_<;?php echo $lineNo;?>;"; value=";<;?php echo $line['rq_item_id'];?>;";>; <;input type=";text"; name=";has_prepare_<;?php echo $lineNo;?>;"; id=";has_prepare_<;?php echo $lineNo;?>;"; value=";<;?php echo $line['has_prepare'];?>;";>; <;input type=";text"; name=";stock_code_<;?php echo $lineNo;?>;"; id=";stock_code_<;?php echo $lineNo;?>;"; value=";<;?php echo $line['stock_codes'];?>;";>; <;input type=";text"; name=";stock_name_<;?php echo $lineNo;?>;"; id=";stock_name_<;?php echo $lineNo;?>;"; value=";<;?php echo $line['stock_desc'];?>;";>; <;input type=";text"; name=";stock_detail_<;?php echo $lineNo;?>;"; id=";stock_detail_<;?php echo $lineNo;?>;"; value=";<;?php echo $line['model'];?>;";>; <;input type=";text"; name=";building_<;?php echo $lineNo;?>;"; id=";building_<;?php echo $lineNo;?>;"; value=";<;?php echo $line['building'];?>;";>; <;input type=";text"; name=";delivery_to_<;?php echo $lineNo;?>;"; id=";delivery_to_<;?php echo $lineNo;?>;"; value=";<;?php echo $line['delivery_to'];?>;";>; <;input type=";text"; name=";supplier_name_<;?php echo $lineNo;?>;"; id=";supplier_name_<;?php echo $lineNo;?>;"; value=";<;?php echo $line['supplier_ids'];?>;";>; <;input type=";text"; name=";qty_<;?php echo $lineNo;?>;"; id=";qty_<;?php echo $lineNo;?>;"; value=";<;?php echo $line['qty'];?>;";>; <;input type=";text"; name=";remark_<;?php echo $lineNo;?>;"; id=";remark_<;?php echo $lineNo;?>;"; value=";<;?php echo $line['remark'];?>;";>; <;/span>; <;/td>; <;td id=";stock_code_html_<;?php echo $lineNo;?>;";>;<;?php echo $stock_code?$stock_code:";&;nbsp;";;?>;<;/td>; <;td id=";stock_name_html_<;?php echo $lineNo;?>;";>;<;?php echo $line['stock_desc']?$line['stock_desc']:";&;nbsp;";;?>;<;/td>; <;td id=";stock_detail_html_<;?php echo $lineNo;?>;";>;<;?php echo $line['model']?$line['model']:";&;nbsp;";;?>;<;/td>; <;td id=";building_html_<;?php echo $lineNo;?>;";>;<;?php echo $line['building']?$line['building']:";&;nbsp;";;?>;<;/td>; <;td id=";delivery_to_html_<;?php echo $lineNo;?>;";>;<;?php echo $line['delivery_to']?$line['delivery_to']:";&;nbsp;";;?>;<;/td>; <;td id=";supplier_name_html_<;?php echo $lineNo;?>;";>;<;?php echo $line['supplier_ids']?$line['supplier_ids']:";&;nbsp;";;?>;<;/td>; <;td id=";qty_html_<;?php echo $lineNo;?>;"; align=";right";>;<;?php echo round($line['qty'],ROUND_VALUE); ?>;<;/td>; <;td id=";remark_html_<;?php echo $lineNo;?>;";>;<;?php echo $line['remark']?$line['remark']:";&;nbsp;";;?>;<;/td>; <;td>;<;a id=";link_edit_<;?php echo $lineNo;?>;"; href=";javascript:initEditRqItem(<;?php echo $lineNo;?>;);";>;修改<;/a>;|<;a id=";link_delete_<;?php echo $lineNo;?>;"; href=";javascript:deleteRqItem(<;?php echo $lineNo;?>;);";>;删除<;/a>;<;/td>; <;/tr>; <;?php } ?>; <;span id=";temptr"; style=";display:none";>;<;/span>; <;tr id=";addtr"; >; <;td>;&;nbsp;<;/td>; <;td>;<;input type=";text"; name=";stock_code"; id=";stock_code"; class=";text";>;<;/td>; <;td>;<;input type=";text"; name=";stock_name"; id=";stock_name"; class=";text";>;<;/td>; <;td>;<;input type=";text"; name=";stock_detail"; id=";stock_detail"; class=";text";>;<;/td>; <;td>;<;input type=";text"; name=";building"; id=";building"; class=";text";>;<;/td>; <;td>;<;input type=";text"; name=";delivery_to"; id=";delivery_to"; class=";text";>;<;/td>; <;td>;<;input type=";text"; name=";supplier_name"; id=";supplier_name"; class=";text";>;<;/td>; <;td align=";right";>;<;input name=";qty"; id=";qty"; type=";text"; class=";text";>;<;/td>; <;td>;<;input type=";text"; name=";remark"; id=";remark"; class=";text";>;<;/td>; <;td>;<;a id=";link_save"; href=";javascript:addRqItem();";>;新增<;/a>;|<;a href=";javascript:resetItem();";>;重置<;/a>;<;/td>; <;/tr>; <;tr>; <;td>;合计<;/td>; <;?php $addCounter = count($requireInfo['m_require_item']); //统计 if(!isset($qtyTotal)){ $qtyTotal=null; } for($i=0;$i<;$addCounter;$i++){ $qtyTotal += trim($requireInfo['m_require_item'][$i]['qty']); } ?>; <;td colspan=";6";>;&;nbsp;<;/td>; <;td align=";right";>;<;b>;<;?php echo round($qtyTotal,ROUND_VALUE); ?>;<;/b>;<;/td>; <;td>;&;nbsp;<;/td>; <;td>;&;nbsp;<;/td>; <;/tr>; <;/table>; function addRqItem(){ var db_len = $(";tr[id^='db_line_']";).size(); //修改前已有的行数 var add_len = $(";tr[id^='item_']";).size();//新增的行数 len = parseInt(db_len)+parseInt(add_len)+1; //生成html tr area displayAddItem(len); // 将值填入生成的html tr area fillHiddenAndTextVal(len, add_len); //清空reset新增text 输入值 resetItem(); } function fillHiddenAndTextVal(lineNo){ $(";#stock_code_";+lineNo).val($(";#stock_code";).val()); $(";#stock_name_";+lineNo).val($(";#stock_name";).val()); $(";#stock_detail_";+lineNo).val($(";#stock_detail";).val()); $(";#building_";+lineNo).val($(";#building";).val()); $(";#delivery_to_";+lineNo).val($(";#delivery_to";).val()); $(";#supplier_name_";+lineNo).val($(";#supplier_name";).val()); $(";#qty_";+lineNo).val($(";#qty";).val()); $(";#remark_";+lineNo).val($(";#remark";).val()); $(";#stock_code_html_";+lineNo).html($(";#stock_code";).val()+'&;nbsp;'); $(";#stock_name_html_";+lineNo).html($(";#stock_name";).val()+'&;nbsp;'); $(";#stock_detail_html_";+lineNo).html($(";#stock_detail";).val()+'&;nbsp;'); $(";#building_html_";+lineNo).html($(";#building";).val()+'&;nbsp;'); $(";#delivery_to_html_";+lineNo).html($(";#delivery_to";).val()+'&;nbsp;'); $(";#supplier_name_html_";+lineNo).html($(";#supplier_name";).val()+'&;nbsp;'); $(";#qty_html_";+lineNo).html($(";#qty";).val()+'&;nbsp;'); $(";#remark_html_";+lineNo).html($(";#remark";).val()+'&;nbsp;'); } //生成html tr显示区域及对应的post hidden区域 function displayAddItem(no, add_len){ trContent='<;tr id=";item_'+no+'";>;<;td>;<;span id=";html_line_'+no+'";>;'+no+'<;/span>;'+ '<;span style=";display:none";>;<;input type=";text"; name=";rq_item_id_'+no+'"; id=";rq_item_id_'+no+'";>;'+ '<;input type=";text"; name=";has_prepare_'+no+'"; id=";has_prepare_'+no+'";>;'+ '<;input type=";text"; name=";stock_code_'+no+'"; id=";stock_code_'+no+'";>;'+ '<;input type=";text"; name=";stock_name_'+no+'"; id=";stock_name_'+no+'";>;'+ '<;input type=";text"; name=";stock_detail_'+no+'"; id=";stock_detail_'+no+'";>;'+ '<;input type=";text"; name=";building_'+no+'"; id=";building_'+no+'";>;'+ '<;input type=";text"; name=";delivery_to_'+no+'"; id=";delivery_to_'+no+'";>;'+ '<;input type=";text"; name=";supplier_name_'+no+'"; id=";supplier_name_'+no+'";>;'+ '<;input type=";text"; name=";qty_'+no+'"; id=";qty_'+no+'";>;'+ '<;input type=";text"; name=";remark_'+no+'"; id=";remark_'+no+'";>;'+ '<;/span>;'+ '<;/td>;'+ '<;td id=";stock_code_html_'+no+'";>;&;nbsp;<;/td>;'+ '<;td id=";stock_name_html_'+no+'";>;&;nbsp;<;/td>;'+ '<;td id=";stock_detail_html_'+no+'";>;&;nbsp;<;/td>;'+ '<;td id=";building_html_'+no+'";>;&;nbsp;<;/td>;'+ '<;td id=";delivery_to_html_'+no+'";>;&;nbsp;<;/td>;'+ '<;td id=";supplier_name_html_'+no+'";>;&;nbsp;<;/td>;'+ '<;td id=";qty_html_'+no+'"; align=";right";>;&;nbsp;<;/td>;'+ '<;td id=";remark_html_'+no+'";>;&;nbsp;<;/td>;'+ '<;td>;<;a id=";link_edit_'+no+'"; href=";javascript:initEditRqItem('+no+');";>;修改<;/a>;|<;a id=";link_delete_'+no+'"; href=";javascript:deleteRqItem('+no+');";>;删除 <;/a>;<;/td>;<;/tr>;'; if(add_len){ $(trContent).insertAfter(";#item_";+no); }else{ $(trContent) .insertBefore(";#addtr";); //表格中总是存在 } } function resetItem(){ $(";#stock_code";).val(''); $(";#stock_name";).val(''); $(";#stock_detail";).val(''); $(";#building";).val(''); $(";#delivery_to";).val(''); $(";#supplier_name";).val(''); $(";#qty";).val(''); $(";#remark";).val(''); } function deleteRqItem(no){ var db_len = $(";tr[id^='db_line_']";).size(); //修改前已有的行数 var add_len = $(";tr[id^='item_']";).size();//新增的行数 len = parseInt(db_len)+parseInt(add_len); var has_prepare = $('#has_prepare_'+no).val(); if(has_prepare>;0){ alert(";该行料号已经备货生效，请不要删除";); }if(len==1){ alert(";订单行信息至少需要一行，请不要删除";); }else{ if(has_prepare==0){ //生成已经存在的订单行删除列表存到hidden is_deleted delete_ids = $('#line_delete').val(); delete_current_id = $('#rq_item_id_'+no).val(); if(delete_ids!==''&;&;delete_current_id!==''){ delete_ids += ";,";+delete_current_id; $('#line_delete').val(delete_ids); }if(delete_ids==''&;&;delete_current_id!==''){ $('#line_delete').val(delete_current_id); } } if(db_len>;0&;&;no<;db_len){ $(";#db_line_";+no).remove();//删除已有的 resetDisplayTrAttr(no, db_len, 'db_line_'); if(add_len>;0){ resetDisplayTrAttr(db_len, len, 'item_'); } } if(db_len>;0&;&;no==db_len){ $(";#db_line_";+no).remove();//删除已有的 if(add_len>;0){ resetDisplayTrAttr(db_len, len, 'item_'); } } if(len==no){ $(";#item_";+no).remove();//删除新增的 }if(no>;db_len&;&;no<;len){ $(";#item_";+no).remove();//删除新增的 resetDisplayTrAttr(no, len, 'item_'); } } } function resetDisplayTrAttr (no, lenCount, trName){ inputDom = new Array( 'rq_item_id','has_prepare','stock_detail','stock_name','stock_code','buil ding','delivery_to','supplier_name','qty','remark'); for(var temp=no+1;temp<;=lenCount;temp++){ $(";#";+trName+temp).attr('id',trName+(temp-1)); //RESET INDEX OF HIDDEN $(";#html_line_";+temp).text(temp-1); $(";#html_line_";+temp).attr('id','html_line_'+(temp-1)); for(var i=0;i <;inputDom.length;i++){ resetHiddenIdAndNameAttr(inputDom[i]+'_',temp); } //reset INDEX OF td id $(";#stock_code_html_";+temp).attr('id','stock_code_html_'+(temp-1)); $(";#stock_name_html_";+temp).attr('id','stock_name_html_'+(temp-1)); $(";#stock_detail_html_";+temp).attr('id','stock_detail_html_'+(temp-1)); $(";#building_html_";+temp).attr('id','building_html_'+(temp-1)); $(";#delivery_to_html_";+temp).attr('id','delivery_to_html_'+(temp-1)); $(";#supplier_name_html_";+temp).attr('id','supplier_name_html_'+(temp-1)); $(";#qty_html_";+temp).attr('id','qty_html_'+(temp-1)); $(";#remark_html_";+temp).attr('id','remark_html_'+(temp-1)); //reset index id of href $(";#link_edit_";+temp).attr('href','javascript:initEditRqItem('+(temp-1)+')'); $(";#link_edit_";+temp).attr('id','link_edit_'+(temp-1)); $(";#link_delete_";+temp).attr('href','javascript:deleteRqItem('+(temp-1)+')'); $(";#link_delete_";+temp).attr('id','link_delete_'+(temp-1)); } } function resetHiddenIdAndNameAttr(obj,lineNo){ $(";#";+obj+lineNo).attr('name',obj+(lineNo-1)); $(";#";+obj+lineNo).attr('id',obj+(lineNo-1)); } function initEditRqItem(lineNo){ $(";#stock_code";).val($(";#stock_code_";+lineNo).val()); $(";#stock_name";).val($(";#stock_name_";+lineNo).val()); $(";#stock_detail";).val($(";#stock_detail_";+lineNo).val()); $(";#building";).val($(";#building_";+lineNo).val()); $(";#delivery_to";).val($(";#delivery_to_";+lineNo).val()); $(";#supplier_name";).val($(";#supplier_name_";+lineNo).val()); $(";#qty";).val($(";#qty_";+lineNo).val()); $(";#remark";).val($(";#remark_";+lineNo).val()); //修改两个链接的名称及属性 $(";#link_save";).text(";保存";); $(";#link_save";).attr('href','javascript:saveEditRqItem('+lineNo+')'); } function saveEditRqItem(lineNo){ fillHiddenAndTextVal(lineNo); resetItem(); //reset两个链接的名称及属性 $(";#link_save";).text(";新增";); $(";#link_save";).attr('href','javascript:addRqItem()'); } 提交数据 Array ( [is_deleted ] =>; [itemLines ] =>; 4 [rq_id] =>; 6 [project_id] =>; 1 [building_header] =>; 45 [create_time] =>; 2010-08-26 09:08:20 [ref] =>; 45 //header end [rq_item_id_1] =>; 24 //items begin [has_prepare_1] =>; 0 [stock_code_1] =>; 60.4EX29.001 [stock_name_1] =>; 23 [stock_detail_1] =>; 3 [building_1] =>; 434 [delivery_to_1] =>; 79 [supplier_name_1] =>; 可胜 [qty_1] =>; 30 [remark_1] =>; 4 [rq_item_id_2] =>; 25 [has_prepare_2] =>; 0 [stock_code_2] =>; 60.4AE07.003 [stock_name_2] =>; 显示器后盖 [stock_detail_2] =>; 4 [building_2] =>; 5 [delivery_to_2] =>; 79 [supplier_name_2] =>; 富钰 [qty_2] =>; 44 [remark_2] =>; [rq_item_id_3] =>; [has_prepare_3] =>; [stock_code_3] =>; [stock_name_3] =>; [stock_detail_3] =>; [building_3] =>; [delivery_to_3] =>; [supplier_name_3] =>; [qty_3] =>; 55 [remark_3] =>; [rq_item_id_4] =>; [has_prepare_4] =>; [stock_code_4] =>; [stock_name_4] =>; [stock_detail_4] =>; [building_4] =>; [delivery_to_4] =>; [supplier_name_4] =>; 55 [qty_4] =>; [remark_4] =>; [stock_code] =>; [stock_name] =>; [stock_detail] =>; [building] =>; [delivery_to] =>; [supplier_name] =>; [qty] =>; [remark] =>; )