`
Angelialily
  • 浏览: 238340 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

动态 Table 添加删除行

J# 
阅读更多
<html>  
  <head>  
  <title>abc</title>  
<style type="text/css">
.brungrundColor {background-color:#DAA520;}
.fontSizeB {font-family:Verdana,Arial; font-size: 9pt;}
.borderClass {border-top:1px solid #cfcfcf;border-right:1px solid #cfcfcf;border-bottom:1px solid  #cfcfcf;font-family:Verdana,Arial; font-size: 10pt;}
.clsBtn2w { MARGIN-RIGHT: 1px; BACKGROUND-IMAGE: url(../exclInputDemo/btngnd2c.gif); WIDTH: 46px; BORDER-TOP-STYLE:   none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; HEIGHT: 22px; BORDER-BOTTOM-STYLE: none }
   .clsBtn4w { MARGIN-RIGHT: 1px; BACKGROUND-IMAGE: url(../exclInputDemo/btngnd4c.gif); WIDTH: 68px; BORDER-TOP-STYLE: none;      BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; HEIGHT: 22px; BORDER-BOTTOM-STYLE: none }
</style>
  <SCRIPT src="../exclInputDemo/setday.js"></SCRIPT>
  <SCRIPT   language="javascript">  
  var   curSrc=null;  
  function     EditCell(){  
    var   i=0,j=0;  
    var   wid=0;  
    var   Val='';  
    var   Scr=event.srcElement;   // 当前元素

            if(Scr.tagName=="TD")  
            {  
  wid=Scr.clientWidth-3;  // 列宽度

  Val=Scr.innerHTML;  
  Scr.innerHTML="<input   id='InputText'   style='border:0px   none;   BACKGROUND-COLOR:   transparent;#3399FF;   height:14px;font-family:宋体;font-size:12px;color:#000000'   onblur='return   CellOut()'   type='text'   name='T1'   size='10'   "+(wid==0?"":"style='width:"+wid+"'")   +"   Value='"   +MyTable.rows[i].cells[j].innerText+"'>";  

InputText.value=Val;  

curSrc=Scr;  
                 Scr.children[0].focus();  
             }  
      }  
  function   CellOut()  
  {  
      var   Scr=event.srcElement;  
      var   Val='';  
  if(curSrc)    
  {  
Val=Scr.value;  
curSrc.innerHTML=Val;  
  }  
   
  }  
   

  window.onload = function(){
//var pid = "PIAN200862292100000066";
var div1 = document.getElementById("div1");
if(pid == ""){
div1.style.display="";
}else{
div1.style.display="none";
}

  }
  </SCRIPT>  
  </head>  
  <body>  

  <div id="div1">
  <table style='BORDER-COLLAPSE:   collapse'   border="0"   width="100%"   style="font-family:宋体;font-size:14px" cellpadding="0" cellspacing="0">
<tr height="22" class="brungrundColor">
<td style="border:1px solid #cfcfcf">保险单号</td>
<td class="borderClass">投保单号</td>
<td class="borderClass">起保时间</td>
<td class="borderClass">投保人(或单位)</td>
<td class="borderClass">投保人联系方式</td>
<td class="borderClass">险种</td>
<td class="borderClass">保险金额</td>
<td class="borderClass">保险费率</td>
<td class="borderClass">保单类型</td>
</tr>

<tr>
<td><input type="text" id="1" value="PIAN2009" maxlength="22" size="22"></td>
<td><input type="text" id="2" value="TIAN2009" maxlength="22" size="22"></td>
<td>
<INPUT style="background-color: #999999" id="starttime2" onclick="setday(this)" size="10" name="starttime" readOnly=true runat="server">
</td>
<td><input type="text" id="4" value=""></td>
<td><input type="text" id="5" value="" size="13"></td>
<td>
<select name="insurantType">
<option value="2" selected>地方政策性补贴</option>
<option value="1">中央政策性补贴</option>
</select>
</td>
<td><input type="text" id="7" value="10000" size="7"></td>
<td><input type="text" id="8" value="6" size="7"></td>
<td>
<select name="type" style="width:60px">  
<option value="1" selected>标的</option>
<option value="2">分户</option>
</select>
</td>
</tr>
  </table>
  </div>

  <table   id='MyTable'   style='BORDER-COLLAPSE:   collapse'   border="1"  style="font-family:宋体;font-size:14px">
  <tr row_num="0" class="brungrundColor" height="22">  
  <td width="4%" noWrap="noWrap">&nbsp;</td>  
  <td width="12%" noWrap="noWrap">防疫码</td>  
  <td width="12%" noWrap="noWrap">内部编码</td>  
  <td width="8%" noWrap="noWrap">品种</td>  
  <td width="5%" noWrap="noWrap">蓄龄</td>  
  <td width="20%" noWrap="noWrap">养殖地点</td>  
  <td width="10%" noWrap="noWrap">保护姓名</td>  
  <td width="15%" noWrap="noWrap">身份证号</td>
  <td width="8%" noWrap="noWrap">保护联系方式</td> 
  <td width="15%" noWrap="noWrap">备注</td> 
  </tr>  
  <tr row_num="1">  
  <td width="4%" onclick="return del();"><font size="2" color="red">删除</font></td>  
  <td width="12%" class="fontSizeB" noWrap="noWrap" OnClick="return    EditCell(),add(parseInt(1)+1)"">200956100145200 </td>  
  <td width="12%" class="fontSizeB" noWrap="noWrap" OnClick="return   EditCell(),add(parseInt(1)+1)"">WFY001 </td>  
  <td width="8%"  class="fontSizeB" noWrap="noWrap" OnClick="return   EditCell(),add(parseInt(1)+1)"">约克夏 </td>  
  <td width="5%"  class="fontSizeB" noWrap="noWrap" OnClick="return   EditCell(),add(parseInt(1)+1)"">34 </td>  
  <td width="20%" class="fontSizeB" noWrap="noWrap" OnClick="return   EditCell(),add(parseInt(1)+1)"">北京市房山区蘑菇村 </td>  
  <td width="10%" class="fontSizeB" noWrap="noWrap" OnClick="return   EditCell(),add(parseInt(1)+1)">李宝善 </td>  
  <td width="15%" class="fontSizeB" noWrap="noWrap" OnClick="return   EditCell(),add(parseInt(1)+1)">110020529153681100 </td>
  <td width="8%"  class="fontSizeB" noWrap="noWrap" OnClick="return   EditCell(),add(parseInt(1)+1)">13888888888 </td>
  <td width="15%" class="fontSizeB" noWrap="noWrap" OnClick="return   EditCell(),add(parseInt(1)+1)">其他 </td>
  </tr>  
  </table>
  <table>
  <tr><td align="center"><font color="red" size="2">* 录入完成后请点击“确定完成”按钮,否则本次录入将作废&nbsp;&nbsp;&nbsp;&nbsp;</font><input class="clsBtn4w" type="button" value="确定完成"/></td></tr>
  </table>
 
<!-- //////////////////////////////JS 代码处///////////////////////////////////// -->

  <script>  
        var   row_num;  
        var   table   =   document.getElementById('MyTable');  
         
        function   add(){

    var x=document.getElementById('MyTable').rows;
var index = x.length;
    var y=x[index-1].cells; // 得到列


newRow   =   table.insertRow(index); //插入行

// newRow.row_num = "" + index;
var tmpStr;
for(var s=0;s<y.length;s++){

tmpStr = newRow.insertCell();
if(s==0){ //第一列显示删除

//tmpStr.innerText="删除";

tmpStr.innerHTML = "<input class='clsBtn2w' type='button' name='btn' value='删除'/>";

tmpStr.style.fontSize="10pt";
tmpStr.style.color="red";

}else{
tmpStr.style.fontSize="10pt";
}

}

var sms=x[index].cells;

// 为列添加事件
for (var i=0;i<y.length;i++)
  {
if(i>0){
y[i].onclick = Function("return   EditCell();");
sms[i].onclick = Function("return   EditCell(),add();");
}else{
y[i].onclick = Function("return   del();");
sms[i].onclick = Function("return   del();");
}
  }

row_num   =   table.rows.length;
//alert(document.getElementById('MyTable').innerHTML);
        }  

        function   del(){   // 还有删除最后一行后无法添加下列行 （未实现）

table.deleteRow(event.srcElement.parentElement.parentElement.rowIndex);

var x=document.getElementById('MyTable').rows;
var index = x.length;

    var y=x[index].cells; // 得到列

newRow   =   table.insertRow(index); //插入行

//newRow.row_num = "" + index;

for (var i=0;i<y.length;i++)
{
if(i>0){
y[i].onclick = Function("return  add();");
}else{
y[i].onclick = Function("return  del();");
}
}

row_num   =   table.rows.length; 
//alert(document.getElementById('MyTable').innerHTML);
        }  
  </script>
  </body>  
  </html>  
0
顶
1
踩
分享到：
| js 电子邮件验证
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics