`
Angelialily
  • 浏览: 241610 次
  • 性别: 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 电子邮件验证
评论
发表评论

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

相关推荐

    HTML TABLE批量添加行与删除行

    HTML TABLE批量添加行与删除行.javascript实现。

    js table添加删除行

    js table添加、删除行。点“添加”按钮可以添加一行，每行后面都有一个删除按钮，可以删除所在行。

    JQuery动态添加删除table行.

    在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作，包括动态地添加和删除表格行。本文将深入探讨如何使用jQuery实现这一功能，以提高网页交互性。 一、HTML基础 首先，我们需要一个基本...

    利用jquery给指定的table动态添加一行、删除一行的方法

    这篇文章主要介绍了如何使用jQuery在指定的HTML表格（table）中动态地添加和删除行。jQuery是一种广泛使用的JavaScript库，它简化了DOM操作，包括在表格中动态修改内容。 首先，我们要理解HTML表格的基本结构，一个...

    table动态添加行

    在某些交互式应用中，用户可能需要动态地添加或删除表格行，以满足实时编辑和更新数据的需求。"table动态添加行"这个主题就涉及到如何在`HTML`表格中实现这些功能。 首先，我们要理解基本的`HTML`表格结构。一个...

    table动态增加删除行列

    使用javascript实现table动态增加删除行列。

    table JS 添加行和删除行

    在本话题中，我们将深入探讨如何使用JavaScript来添加和删除HTML表格（table）中的行。这对于构建数据展示或者管理界面非常实用。 首先，让我们了解HTML表格的基本结构。一个简单的HTML表格由`&lt;table&gt;`标签定义，每...

    javascript table 增加删除行,巧妙实现

    在JavaScript中，表格（Table）是网页数据展示的常用元素，而动态地增加或删除行则是常见的交互需求。本文将深入探讨如何巧妙地利用JavaScript来实现这个功能。 首先，我们需要了解HTML中的`&lt;table&gt;`元素及其相关...

    jstable添加行删除行复制行

    在`jstable添加行删除行复制行.html`这个示例文件中，可以看到这些概念是如何具体实现的。通过阅读和理解代码，你可以更深入地学习如何利用JavaScript实现表格的动态管理。同时，也可以结合CSS和jQuery等库来增强...

    JS动态添加、删除Table行排序（删除整行、删除整列）

    这篇教程将专注于如何使用JavaScript动态地添加、删除Table的行，并实现排序功能，包括删除整行和整列。以下是对这些概念的详细解释： 1. **动态添加Table行：** 要动态添加行，我们可以使用`document....

    添加删除TABLE行

    javascript添加删除table行

    使用jquery给指定的table动态添加一行、删除一行

    支持动态删除一行。 先演示结果，如中意了在好好研究代码。 1、原始界面如下： 2、添加一行，如要添加一行需点击“添加”按钮，现点击两下会自动添加两行，效果如下截图： 3、删除一行，如要删除指定行，先要选中...

    一个动态添加table行的js例子

    在JavaScript编程中，动态添加和删除表格行是一个常见的需求，特别是在网页交互和数据展示中。这个例子主要展示了如何使用JS实现这一功能。首先，我们来理解这个“动态添加table行的js例子”的核心知识点。 1. **...

    动态table添加或者删除一行使序号重新排序，placeholder、id和name同时重新排序

    动态table添加或者删除一行使序号重新排序，placeholder、id和name同时重新排序

    jquery表格动态添加删除行代码.zip

    本示例“jquery表格动态添加删除行代码”利用jQuery的强大功能，为用户提供了一个直观且用户友好的表格管理体验。这个代码实现了一个功能，即在表格中动态地添加和删除行，这对于数据展示和编辑是非常实用的。 首先...

    TableLayout，实现动态添加和删除行，并实现统计表格中的数据

    在这个场景中，我们将深入探讨如何使用TableLayout动态添加和删除行，以及如何实现数据的统计。 1. **动态添加和删除行** 在TableLayout中，每一行是由TableRow对象构成的。要动态添加行，首先需要创建一个新的...

    74、jquery表格动态添加删除行代码

    &lt;title&gt;jQuery动态添加删除行 &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt; &lt;table id="myTable"&gt; 姓名 年龄 操作 张三 &lt;td&gt;25 &lt;td&gt;&lt;button class="delete"&gt;删除...

    动态添加/删除表格行并提交内容到后台

    在开发Web应用时，动态添加和删除表格行是常见的需求，尤其在数据管理或表单填写场景中。本文将深入探讨如何使用C#后端和JavaScript前端技术来实现这一功能，为初学者提供一个基础的实践指导。 首先，我们要了解...

    bootstrap table实现双击可编辑、添加、删除行功能

    本文实例为大家分享了bootstrap table双击可编辑的具体代码，供大家参考，具体内容如下 html： &lt;table class=table id=para_table&gt; 名称 值 操作 &lt;td style=tex

    JavaScript动态添加删除表格行

    这篇博客"JavaScript动态添加删除表格行"可能详细讲解了如何使用JavaScript实现这一功能。通过给定的标签"源码"和"工具"，我们可以推测这篇文章会包含实际的代码示例和实用方法。 在HTML中，`&lt;table&gt;`元素用于创建...

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