`

javascript实现动态添加删除表格行

阅读更多
<script    language="javascript">  
   function    get_Element(the_ele,the_tag){  
   the_tag    =    the_tag.toLowerCase();  
   if(the_ele.tagName.toLowerCase()==the_tag)  
   return    the_ele;  
   while(the_ele=the_ele.offsetParent){  
   if(the_ele.tagName.toLowerCase()==the_tag)  
   return    the_ele;  
   }  
   return(null);  
   }  
   
   function    add_Row(the_table)    {  
   var    the_row,the_cell;  
   var    cur_rows=the_table.rows.length;  
   the_row=cur_rows==null?-1:(cur_rows);  
   var    i=the_row-1;    
   var    newrow=the_table.insertRow(i);//得到插入位置 
  
   the_cell=newrow.insertCell(0);  
   the_cell.innerHTML="<center    >"+i;  
   the_cell=newrow.insertCell(1);  
   the_cell.innerHTML="<center    ><input    name=A"+i+"    type=text    size=30>";    
   the_cell=newrow.insertCell(2);  
   the_cell.innerHTML="<center    ><INPUT    type=button    value=删除      onclick=del_row(myTable)>";  
   //alert(the_table.rows.length);
   document.getElementById("cname").value=myTable.rows.length;
     }  
   
   function    del_row(the_table){  
     var    the_cell;  
   the_cell=get_Element(event.srcElement,"td");  
   var    index=the_cell.parentElement.rowIndex;  
   if(the_cell==null)    return;  
   if(the_table.rows.length==1)    return;  
   the_table.deleteRow(index);  
   
   var    cell1='';  
   var    cell2='';  
   document.getElementById("cname").value=document.getElementById("cname").value-1;
   for(var    i=1;i<document.getElementById('myTable').rows.length-2;i++)  
   {  
     try  
        {  
           cell1=document.getElementById('myTable').rows[i].cells[0];        
           cell2=document.getElementById('myTable').rows[i+1].cells[0];      
           cell22=document.getElementById('myTable').rows[i+1].cells[1];                                           
                if(parseInt(cell2.innerText)!=(parseInt(cell1.innerText)+1))  
                {  
                              s=cell1.innerText.replace("","");                              
                             cell2.innerText=(parseInt(s-0)+1);  
                             cell2.style.textAlign='center';
                             cell22.innerHTML="<center    ><input    name=A"+(i+1)+"    type=text    size=30>";
                           //alert(cell22.innerHTML);                         
                         
                 }  
         }  
      catch(e)  
      {  
          alert(e.discription);  
      }  
   
   }  
   } 
   </script>

<form name="form1" method="post" >
   <table    width="60%"    border="0" align="center"    cellpadding="2"    cellspacing="1" bgcolor="#BBB3AA"      id="myTable"    >
     <tr    class="TdContent">
       <td bgcolor="#FFFFFF"    ><div    align="center">收件人</div></td>
       <td bgcolor="#FFFFFF"    ><div    align="center">接收人
             <input type="hidden" name="cname" id="cname">
       </div></td>
       <td bgcolor="#FFFFFF"    ><div    align="center">操作</div></td>
     </tr>
     <tr    class="TdContent">
       <td bgcolor="#FFFFFF"><div    align="center">1</div></td>
       <td align="center" bgcolor="#FFFFFF"><input    name="A1"    type="text" id="A1"    size="30"    >
       </td>
       <td bgcolor="#FFFFFF"><div    align="center">
           <input name="button"      type="button"        class="ButtonStyle"    onClick="add_Row(myTable)"    value="添加">
       </div></td>
     </tr>
     <tr    class="TdContent">
       <td    colspan="3"    align="center" bgcolor="#FFFFFF">&nbsp;</td>
     </tr>
   </table>
</form>
分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    JavaScript动态添加删除表格行

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

    javascript实现表格添加删除等操作

    这个案例主要涉及了如何使用JavaScript来实现表格的添加、删除等基本操作。这些功能对于网页交互性和用户体验有着重要的作用,尤其适合初学者进行学习和实践。 首先,`students.html`文件很可能是用来展示表格结构...

    JavaScript动态操作表格,添加,删除行、列及单元格

    JavaScript动态操作表格,添加,删除行、列及单元格! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/

    javascript实现动态增加删除表格行(兼容IE FF).docx

    ### JavaScript 实现动态增加删除表格行(兼容IE/FF) #### 概述 本文将详细介绍如何使用JavaScript来实现在Web页面上动态增加和删除表格行的功能,并确保该功能在Internet Explorer (IE) 和 Firefox (FF) 等...

    javascript动态添加表格数据行

    在JavaScript编程中,动态添加表格数据行是一种常见的需求,特别是在构建交互式的Web应用程序时。这个功能允许用户在不刷新整个页面的情况下添加新的记录,提高了用户体验。在这个例子中,我们将探讨如何利用...

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

    总结起来,实现动态添加/删除表格行并提交内容到后台的过程涉及前端JavaScript的事件监听、DOM操作以及AJAX请求,后端C#的HTTP请求处理和数据库操作。这种功能在实际项目中非常常见,对于初学者来说,理解并掌握这些...

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

    总的来说,"jquery表格动态添加删除行代码"是一个结合了HTML、CSS和JavaScript(主要是jQuery)的示例,它展示了如何利用这些技术来实现动态交互的表格功能。这样的功能在许多Web应用程序中都有广泛的应用,例如在线...

    JS动态增加删除表格行

    本文将深入探讨如何使用JavaScript动态地增加和删除表格行。 首先,我们来了解一下HTML表格的基本结构。一个表格由`&lt;table&gt;`元素包含,其中包含`&lt;tr&gt;`(表格行)元素,每行内可以有多个`&lt;td&gt;`(表格数据单元格)或`...

    js 添加删除表格

    以下是一个简单的例子,展示如何使用JavaScript添加和删除表格行: ```javascript // 获取表格元素 var table = document.getElementById('myTable'); // 添加行 function addRow() { var row = table.insertRow...

    jQuery 动态添加或删除表格行

    在网页开发中,jQuery库因其简洁的语法和强大的功能,被广泛用于处理DOM操作,包括动态添加和删除表格行。本篇文章将详细讲解如何利用jQuery实现这两种操作。 首先,我们来理解HTML表格的基本结构。一个表格由`...

    动态添加删除表!格动态添加删除表格!

    在IT领域,尤其是在网页开发和用户界面设计中,动态添加删除表格是一项常用的技术。它允许用户根据需求在界面上自由地增加或减少表格行或列,提高了交互性和用户体验。本篇将深入探讨这一主题,主要关注如何实现这个...

    基于JavaScript实现动态添加删除表格的行

    又一个动态控制表格的效果,用JavaScript动态生成表格行、表格列,以及还可动态删除这些行列,行等,运行代码后,点击对应的功能按钮,即可实现对应的表格操作功能。 1.jsp 产品名称 编号 数量 重量 操作 ...

    纯javascript增加删除表格行

    3. **删除行**:删除表格行通常涉及到选择要删除的行,并调用`removeChild()`方法。例如,假设我们想删除点击时的当前行,可以这样实现: ```javascript function deleteRow(event) { if (confirm('确定要删除...

    js动态添加删除表格

    在JavaScript中,动态添加和删除表格是常见的网页交互功能,主要应用于数据展示、表单处理等场景。这篇博文通过一个简单的实例,展示了如何利用JavaScript实现这个功能。在讲解之前,我们先了解一下HTML表格的基本...

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

    动态添加和删除行通常涉及向现有表格动态插入或移除这些元素。 1. **动态添加行**: - 使用jQuery,可以获取表格引用,例如`$("#myTable")`,其中`#myTable`是表格的ID。 - 创建新的`&lt;tr&gt;`元素,可以使用`$('&lt;tr&gt;...

    原生js可编辑表格实现动态添加表格行数和删除表格行数

    在JavaScript(JS)中,创建一个可编辑的表格并实现动态添加和删除行的功能是一项常见的需求,尤其是在构建数据管理界面时。以下将详细介绍如何利用原生JavaScript实现这一功能。 首先,我们需要在HTML中创建一个...

Global site tag (gtag.js) - Google Analytics