`

cloneNode实现表格增加删除效果

javascript 
阅读更多 
 <%@   page   contentType="text/html;   charset=gb2312"   %>    
  <html>    
  <head>    
  <title>查询窗口</title>    
  <script   language="JavaScript">    
     
  function   changeValue1(obj){    
  if(obj.value   ==   0){    
  document.getElementById("result").value   =   "f117";      
  }else   {    
  document.getElementById("result").value   =   "gaofei";      
  }    
  }    
    function   changeValue(obj){    
  if(obj.value   ==   0){    
  obj.parentElement.parentElement.cells[1].children[0].value   =   "f117";      
  }else   if(obj.value   ==   1){    
  obj.parentElement.parentElement.cells[1].children[0].value   =   "gaofei";      
  }else      
  obj.parentElement.parentElement.cells[1].children[0].value   =   "";      
     
  } 
  function   insertrow(){    
  var   newrow   =   document.all.tbl.rows[0].cloneNode(true); //克隆一行    
  document.all("newTB").appendChild(newrow); //添加刚才克隆的一行    
  }    
     
  function   delerow(){    
  var   numrow   =   document.all("newTB").rows.length;    
  if   (numrow   ==   0)   {    
  alert("此行无法删除！");    
  return   false;}    
  document.all("newTB").deleteRow(numrow-1);    
  }    
  </script>    
  </head>    
     
  <body   class="dialog_body">    
  <form   method="POST"   onSubmit="return   doSubmit(this)">    
  <fieldset   style="margin:5px;width:630px;">    
  <legend>查询条件</legend>    
      <div   align="center"   class="inputblock"   style="width:930;height:150;overflow:auto;">    
          <table   border="1"   width="900"   cellpadding="0"   cellspacing="0"   class="table">    
              <tr>    
              <td   class="title"   width="16%">列表框</td>    
              <td   class="title"   width="16%">结果</td>    
              </tr>    
            </table>        
            <table   border="1"   width="900"   cellpadding="0"   cellspacing="0"   class="table">    
            <tbody   id="tbl">      
              <tr>    
                  <td   width="16%">    
                  <select   id="pid"   name="project"   onchange="changeValue(this)">    
                  <option   value=""></option>    
  <option   value="0">人员编号</option>    
  <option   value="1">姓名</option>    
  </select>    
                  </td>    
                  <td   width="16%">    
                  <input   id="result"   type="text"   value=""   readonly="true">    
                  </td>    
              </tr>    
          </tbody>    
      <tbody   id="newTB">    
         
      </tbody>      
          </table>    
      </div>    
  </fieldset>    
  <div   align="right"   style="margin:10px;">    
  <input   type="button"   onClick="insertrow();"   value="增加一行">    
  <input   type="button"   onClick="delerow();"   value="删除一行">    
  </div>    
  </form>    
  </body>    
  </html>
分享到：
| 支持IE和FF的div＋css选项卡
评论
发表评论

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

相关推荐

    javascript 表格操作

    - 使用`cloneNode(true)` 复制整个节点及其子节点，然后通过`appendChild()` 将其添加到目标节点，实现表格结构的快速复制和扩展。 - 示例代码：`xxx.childNodes[0].appendChild(yyy.cloneNode(true));` ### 综合...

    javascript 拷贝节点cloneNode()使用介绍.docx

    ### JavaScript 拷贝节点cloneNode()使用介绍 在JavaScript中，`cloneNode()`方法是DOM（Document Object Model）操作中的一个重要功能，主要用于复制（克隆）DOM树中的节点及其属性。这对于创建复杂的用户界面或者...

    JavaScript仿Excel表格演示

    在这个案例中，Ajax用于实现实时的数据通信，比如添加、删除或复制表格行时，后台数据库的同步更新。 1. **动态添加行**：在JavaScript中，可以通过DOM操作动态地创建新的表格行（`&lt;tr&gt;`元素）并插入到表格中。用户...

    根据下拉框变化动态填加或者删除表格的行

    总之，动态添加或删除表格行是网页交互中的常见任务，通过DOM操作和事件监听，我们可以实现灵活的用户界面。了解并熟练掌握这些技术对于前端开发者来说至关重要，能够提高用户体验并优化网页性能。

    js实现无缝轮播图效果

    这涉及到监听鼠标事件或者设置定时器来触发切换，以及对当前图片位置的追踪，以决定何时添加新图片或删除旧图片。 4. 动画效果：实现无缝的关键之一是动画效果的处理。在不影响用户体验的前提下，需要创建新图片并...

    jstable添加行删除行复制行

    在处理表格（Table）元素时，JavaScript可以帮助我们实现实时的动态操作，比如添加、删除和复制行。本文将详细讲解如何使用JavaScript来实现这些功能。 首先，我们需要了解HTML中的`&lt;table&gt;`元素。它用于创建表格，...

    table无限循环无缝滚动.zip

    "table无限循环无缝滚动"是一个功能，它能够让用户在浏览长表格时体验到类似轮播的效果，即当表格底部到达时，表格内容会自动重新排列，让顶部的内容再次出现，形成一种无限滚动的视觉效果。这一技术主要依赖...

    javascript cloneNode()方法的使用

    在上面的实例代码中，我们使用了 cloneNode() 方法来克隆一个 SELECT 元素，并将其添加到一个表格中。下面是对该代码的详细解释： 首先，我们定义了一个 AddRow() 函数，该函数将用于添加一行到表格中。在该函数中...

    JS实现点击图片放大效果

    为了提升用户体验，可以添加平滑的动画效果，例如使用CSS3的`transition`或JavaScript的`requestAnimationFrame`来实现。 6. **关闭放大效果**： 用户应能方便地关闭放大效果，比如再次点击或点击其他地方。为此...

    JAVASCRIPT操作DOM建立增加删除克隆访问节点示例宣贯.pdf

    JavaScript 操作 DOM 建立增加删除克隆访问节点示例宣贯 ...通过 DOM，我们可以动态地操作文档的结构、样式和内容...JavaScript 操作 DOM 可以实现动态地创建、插入、删除、克隆和访问节点，从而实现了对文档的动态操作。

    IE下使用cloneNode注意事项分享

    解决办法是在克隆后删除副本中的`iframe`，或者在`iframe`的页面脚本中添加判断逻辑，避免重复执行。 最后，如果`cloneNode`的目标节点包含`link`标签，也可能产生类似的影响，虽然这里没有详细讨论，但原理相同，...

    左右添加删除模板

    在实现"左右添加删除模板"时，我们可能需要用到数组、事件处理、DOM操作等核心概念。 1. **数组**：在JS中，数组用来存储一系列的数据。在这个模板中，我们可以用数组来保存左侧和右侧的元素列表。例如： ```...

    JavaScript 用cloneNode方法克隆节点的代码

    JavaScript提供了一种简单有效的方法来实现这一点，那就是使用DOM（文档对象模型）中的cloneNode方法。cloneNode方法允许我们复制已有的节点，并且可以选择是否复制节点的子节点，即深拷贝或浅拷贝。 为了理解...

    js操作table

    本文将深入探讨如何使用JavaScript实现表格的刷新、添加、复制和删除功能。 一、表格刷新 表格的刷新通常涉及到重新加载表格数据。在JavaScript中，你可以通过以下步骤实现： 1. 获取表格元素：首先，你需要获取到...

    JavaScript 无缝上下滚动加定高停顿效果

    例如，在本例中，首先创建了一个副本，然后将其添加到原有的列表之后，从而实现了循环滚动的效果。 #### 2. 高级DOM操作与事件处理 - **Class.create()**：这里定义了一个类`Scroller`，用于封装滚动逻辑。`Class....

    JS增加行复制行删除行的实现代码

    本文将深入探讨如何使用JavaScript实现表格中行的增加、复制和删除功能，以供有需要的朋友参考。 首先，我们来看提供的代码片段，它定义了一个名为`customerInfoMethod`的对象，该对象包含了三个方法：`copyrow`、`...

    javascript dom操作之cloneNode文本节点克隆使用技巧

    在JavaScript中，DOM（文档对象模型）操作是实现网页动态交互的基础，而`cloneNode`方法是DOM操作中用于克隆节点的一个重要函数。了解`cloneNode`以及它在克隆文本节点时的使用技巧，对于进行DOM操作的前端开发者来...

    javascript 图片倒影 图片倒影简单实现 简单图片倒影

    可以使用`cloneNode(true)`方法复制原始图片，并设置新图片的`style`属性以实现倒影效果，如垂直翻转、透明度等。 2. **调整大小和位置**: 为了创建倒影效果，通常需要将新图片的高度设置为其原始高度的一定比例...

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