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;
  }
 }
}
?>  

相关文章推荐

javascript动态添加表格数据行

  • 2013年11月02日 15:18
  • 18KB
  • 下载

JavaScript实现动态添加页面的表格行数并获取数据

JavaScript实现动态添加页面的表格行数并获取数据,获取后的数据按照特殊的方式拼接存入数据库,用的时候再把它解析出来就行了。 车型 数量 ...

轻松学习JavaScript二十六:DOM编程学习之动态添加JS脚本和CSS样式

先来一贯使用的HTML文档代码: DOM window.onload=function(){ } div区域        一动态加载外部JS文件        要动态加载...

使用JavaScript动态添加CSS样式规则

动态添加规则到样式表是高效的手段,可能比你想象的还要简单。请记住这种方案,可能在你的下一个大应用中需要使用,因为它能在代码和元素处理这两方面避免你掉进坑里。...
  • renfufei
  • renfufei
  • 2014年09月05日 21:20
  • 20490

用html、jquery、php编写新闻后台管理页面,动态添加新闻数据并实现数据的增删改查功能

用html、jquery、php编写新闻后台管理页面,动态添加新闻数据并实现数据的增删改查功能...

javascript动态添加删除表格数据管理

本文和大家分享一下使用javascript动态添加删除表格数据管理,主要实现功能如下: 点击添加按钮可以添加一个空的可以修改的记录。 点击表格单元格可以修改文本。 修改后实现了保存的接口...

JavaScript动态向表格添加数据

利用javascript ,动态向表格中添加数据 1. 首先先写出表格的表头和主干部分 编号 姓名 职位 ...

JavaScript实现动态添加,删除行

增加Table行     // Example: obj = findObj("image1"); function findObj(theObj, theDoc){  var p, i,...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:php+javascript+css 实现动态添加数据行
举报原因:
原因补充:

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