php+javascript+css 实现动态添加数据行

原创 2007年09月29日 17:08:00

<?php
$sod_part   = $_POST['sod_part'];
$sod_cu_part  = $_POST['sod_cu_part'];
$sod_list_price = $_POST['sod_list_price'];
$sod_net_price  = $_POST['sod_net_price'];
$sod_discount  = $_POST['sod_discount'];
$sod_ord_um  = $_POST['sod_ord_um'];
$sod_req_date  = $_POST['sod_req_date'];
$sod_req_qty  = $_POST['sod_req_qty'];
$sod_notes   = $_POST['sod_notes'];
$add_num   = $_POST['add_num'];
?>

<html>
<head>
<style rel="stylesheet" type="text/css" media="screen">
table.list {
 border-collapse: collapse;
 background: #fff;
 border: 1px solid #999;
 font-size: 12px;
 margin: 2px 0;
}
tr.odd {
 background: #EEE;
}
tr.odd:hover {
 background: yellow;
}
tr.even {
 background: #FFF;
}
tr.even:hover {
 background: yellow;
}
td.prog_caption {
 padding: 0px;
 color: #355173;
 font: bold 16pt Verdana;
 border: 0px solid gold;
}
th.header {
 color: #000;
 padding: 0 5px;
 font-weight: normal;
 background: gold;
 border: 1px solid #999;
}
th.header_v {
 color: #fff;
 font-weight: normal;
 background: navy;
 border: 1px solid blue;
 padding: 0 5px;
 width: 120px;
}
th.criteria {
 padding: 0 5px;
 color: #000;
 font-weight: normal;
 text-align: right;
 background: #D8E4EB;
 width: 120px;
}
td.data {
 padding: 0 5px;
 font-weight: normal;
 background: #FFFF66;
 width: 120px;
}
td.list {
 padding: 0 1px;
 border-bottom: 1px solid #DDD;
 white-space: nowrap;
 text-align:center;
}
fieldset.tab {
 margin: 0;
 padding: 5px;
 border: 3px solid #6BA4D7;
}
fieldset.criteria {
 padding: 0px 5px 2px;
}
legend.criteria {
 padding: 0px 2px;
 color: blue;
 font-weight: bold;
 font-family: Arial;
}
</style>
</head>
<script type="text/javascript"><!-- 
 var sum;
 sum=5; 
 function addDetailProcess(num){
  var num;
  var temp;
  if(num==0){
   num=1;
  }
  for (i=0;i<num;i++){
   sum=sum+1;
   if (sum % 2 == 0){
    var newRow=tbDetailHide1.rows[0].cloneNode(true);
      }
   else if (sum % 2 != 0){
    var newRow=tbDetailHide2.rows[0].cloneNode(true);
   }
   temp=sum*1;
   newRow.all.a.value=temp; 
   tbDetailUsed.insertBefore(newRow);    
  }
 }
  
 function show_cu_info(){
  document.myform.action="add.php";
  document.myform.submit();
 }
  
 function autoInput(){
  var e;
  with(document.myform){
   var tmp = so_discount.value;
   var tmp1 = so_req_date.value;
   for (var i=0;i<elements.length;i++){
    e = elements[i];
    if (e.tagName == "INPUT" && e.type.toLowerCase() == "text" && e.name.substr(0,12) == "sod_discount"){
     e.value = tmp;
    }
    if (e.tagName == "INPUT" && e.type.toLowerCase() == "text" && e.name.substr(0,12) == "sod_req_date"){
     e.value = tmp1;
    }
   }
  }
 }
//--></script>
 
<!--增加出来的表格样式(隐藏)-->
<table class="list" id="tbDetailHide1" style="display:none">  
 <tr class="even">
  <td class="list center"><input type="text" name="a" size="2" readonly="readonly" style="color:#000;background-color:#FFF;border:none;text-align:center;"></td>
  <td><input name="sod_part[]" type="text" size="15" maxlength="15" /></td>
  <td><input name="sod_cu_part[]" type="text" size="15" maxlength="15" /></td>
  <td><input name="sod_list_price[]" type="text" size="10" maxlength="15" /></td>
  <td><input name="sod_net_price[]" type="text" size="10" maxlength="15" /></td>
  <td><input name="sod_discount[]" type="text" size="10" maxlength="5" /></td>
  <td><input name="sod_req_date[]" type="text" size="10" maxlength="20" /></td>
  <td><input name="sod_req_qty[]" type="text" size="10" maxlength="15" /></td>
  <td><input name="sod_ord_um[]" type="text" size="2" maxlength="2" /></td>
  <td><input name="sod_notes[]" type="text" size="10" maxlength="20" /></td>
 </tr>
</table>
<table class="list" id="tbDetailHide2" style="display:none">  
 <tr class="odd">
  <td class="list center"><input type="text" name="a" size="2" readonly="readonly" style="color:#000;background-color:#EEE;border:none;text-align:center;"></td>
  <td><input name="sod_part[]" type="text" size="15" maxlength="15" /></td>
  <td><input name="sod_cu_part[]" type="text" size="15" maxlength="15" /></td>
  <td><input name="sod_list_price[]" type="text" size="10" maxlength="15" /></td>
  <td><input name="sod_net_price[]" type="text" size="10" maxlength="15" /></td>
  <td><input name="sod_discount[]" type="text" size="10" maxlength="5" /></td>
  <td><input name="sod_req_date[]" type="text" size="10" maxlength="20" /></td>
  <td><input name="sod_req_qty[]" type="text" size="10" maxlength="15" /></td>
  <td><input name="sod_ord_um[]" type="text" size="2" maxlength="2" /></td>
  <td><input name="sod_notes[]" type="text" size="10" maxlength="20" /></td>
 </tr>
</table>

<form name="myform" method="post" action="add.php">
 <fieldset class="tab">
  <legend class="criteria">DETAIL</legend>
   <table class="list">
    <tbody id="tbDetailUsed">
    <tr>
     <th class="header">Line</th>
     <th class="header">Part-Num</th>
     <th class="header">Cust-Part</th>
     <th class="header">List-Price</th>
     <th class="header">Net-Price</th>
     <th class="header">Discount</th>
     <th class="header">Date</th>
     <th class="header">Qty</th>
     <th class="header">UM</th>
     <th class="header">Notes</th>
    </tr>
    
    <?php
    for ($i=1;$i<=5;$i++){
     if ($i % 2 == 0){
      echo '<tr class="even">';
     }
     else{
      echo '<tr class="odd">';
     }
     echo '
      <td class="list center">'.$i.'<input name="sod_line[]" type="hidden" value="'.$i.'" /></td>
      <td><input name="sod_part[]" type="text" size="15" maxlength="15" /></td>
      <td><input name="sod_cu_part[]" type="text" size="15" maxlength="15" /></td>
      <td><input name="sod_list_price[]" type="text" size="10" maxlength="15" /></td>
      <td><input name="sod_net_price[]" type="text" size="10" maxlength="15" /></td>
      <td><input name="sod_discount[]" type="text" size="10" maxlength="5" /></td>
      <td><input name="sod_req_date[]" type="text" size="10" maxlength="20" /></td>
      <td><input name="sod_req_qty[]" type="text" size="10" maxlength="15" /></td>
      <td><input name="sod_ord_um[]" type="text" size="2" maxlength="2" /></td>
      <td><input name="sod_notes[]" type="text" size="10" maxlength="20" /></td>
     </tr>';
    }
    ?>
   </tbody></table>
  Add &nbsp;<input name="add_num" type="text" size="2" maxlength="2" />records
  <input name="add_btn" type="button" value="Add" onclick="addDetailProcess(document.myform.add_num.value)" />
  <input name="save" type="submit" value="Save" />
 </fieldset>
</form> 

<?php
if ( $_POST['save'] != ''){
 foreach ($sod_part as $value){
  static $m=0;
  if ($value != null){
   $sod_sql = "INSERT INTO sod VALUES('".$sod_part[$m]."','".$sod_cu_part[$m];
   $sod_sql.= "','".$sod_list_price[$m]."','".$sod_net_price[$m]."','".$sod_discount[$m]."','".$sod_ord_um[$m];
   $sod_sql.= "','".$sod_req_date[$m]."','".$sod_req_qty[$m]."',now(),'".$sod_notes[$m]."') ";
   $sod_res = mysql_query($sod_sql);
   $m++;
  }
  else{
   $m++;
   continue;
  }
 }
}
?>  

php插入javaScript代码

注意:单引号和双引号的使用 echo '  if(confirm("在发布产品前请你补全相关信息,确定吗?")) { window.location.href="main.php?m=comp...
  • leyangjun
  • leyangjun
  • 2013年07月29日 16:35
  • 2059

table表格动态增加行/删除行,动态给highchart赋值

function test_hard_handle_tiaojian_datagrid_searchFun() {     //$('#test_table').datagrid('load', se...
  • an341221
  • an341221
  • 2015年08月07日 08:51
  • 604

repeater动态添加行

Repeater动态添加行             server" onitemcommand="rp_List_ItemCommand">        ...
  • weibingbing_net
  • weibingbing_net
  • 2015年03月09日 16:54
  • 900

jQuery中动态添加和删除行

这里,先看网页代码。 姓名 性别 卡号 会
  • chaplinlong
  • chaplinlong
  • 2016年04月28日 18:43
  • 469

easyui行编辑:利用append row添加行,直接在行中编辑,ajax提交保存

今天工作用到了easyui行编辑,在这里总结一下,不会的同学可以看看,顺便吐槽一下,网上的很多博客都是粘贴复制的,内容很乱 ,而且看不懂,不知道这些粘贴复制的怀的是什么心,不但没用,还影响别人搜索。 ...
  • u011250851
  • u011250851
  • 2016年01月04日 17:35
  • 8308

gridview动态添加行

前台部分内容 教育背景
  • hr541659660
  • hr541659660
  • 2015年08月14日 17:09
  • 504

转js动态给table添加行(tr)

New Document // Example: obj = findObj("image1"); function findObj(theObj, theDoc) {  v...
  • kimliu2009
  • kimliu2009
  • 2016年11月02日 22:21
  • 1936

GridView动态添加一编辑行

这几天遇到了怎样给GridView动态增加一编辑行的需求,因为之前一直没有碰到过,所以一时也不知道怎么实现。后来通过百度看了一些大神给的解决方案和例子,自己也转载了一篇实现这个功能的博客。方法总的来说...
  • u010792238
  • u010792238
  • 2014年03月29日 19:21
  • 1981

GridView动态进行行添加和删除

出处:http://www.cnblogs.com/shenzhoulong/ gridview动态添加行的原理就是用datatable增加新列然后重新绑定; 设计源码 设计gridview代码...
  • TaiHuangTang
  • TaiHuangTang
  • 2013年10月30日 09:51
  • 546

easyui datagrid增加一行或删除一行

String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServ...
  • MrFlameDragon
  • MrFlameDragon
  • 2016年11月24日 11:35
  • 12174
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:php+javascript+css 实现动态添加数据行
举报原因:
原因补充:

(最多只允许输入30个字)