`
jiangyang1986
  • 浏览: 76616 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

js 自动增加行

    博客分类:
  • js
 
阅读更多
<table id="tb" border="1" cellpadding="0" cellspacing="0">
   <tr>
     <td>模板编号</td>
<td>模板名称</td>
   </tr>
   <tr>
    <td>
  <input type="text" name="ids" value=""/>
</td>   
<td>
  <input type="text" name="name" value=""/>
</td>   
   </tr>
</table>
<input type="button" onclick="addRow($('tb'));" value="增加一行"/>
<input type="button" onclick="deleteRow($('tb'));" value="删除一行"/>
<input type="button" onclick="deleteRows($('tb'));" value="删除选中行"/>
<script>

function $(elementId){
if (document.getElementById) {
   return document.getElementById(elementId);
}else if(document.all) {
   return document.all[elementId];
}else if(document.layers) {
   return document.layers[elementId];
}
}
// 给表格增加一行,且与最后一行相同
function addRow(table)
{
   // 获取表格中的最后一行对象TR
   var sampleRow = table.rows[table.rows.length - 1];
   // 获取表格中的最后一行对象TR中的所有TD对象集合,注意,获取的是一个含有多个TD对象的数组集合
   var sampleCell = sampleRow.getElementsByTagName("td");
   // 获取当前表格中的行数序号,为了给每行的每个TD中的对象命名
   var row = table.rows.length;
   // 新创建一个TR对象,也是将要增加到表格中的新行
   var newRow = document.createElement("tr");
   // 根据表格中最后一行sampleRow对象TR中的TD对象集合sampleCell,创建新行newRow中的TD对象集合newCell

   // 遍历表格中的最后一行中TD对象集合,用来复制新增加的行中的每一个新的TD对象
   for(i = 0; i < sampleCell.length; i ++ )
   {
      // 创建一个新的TD对象
      var newCell = document.createElement("td");
      // 将最后一行中第i列的TD对象的内码赋给新行中第i列的新TD对象中
      newCell.innerHTML = sampleCell[i].innerHTML;
      // 给新行中第i列TD对象中的对象赋名
      newCell.childNodes.item(0).name = "cell" + row + i;
      // 在新增加的行中追加一个新的TD子对象
      newRow.appendChild(newCell);
   }
   // 将新行增加到表格最后一行的父对象中,TR的父对象是TBODY,很多时候会被遗忘的......
   sampleRow.parentNode.appendChild(newRow);
}
// 删除表格中的最后一行
function deleteRow(table)
{
   if(table.rows.length == 2)
   window.alert("不允许删除最后一行数据!");
   else
   table.deleteRow(table.rows.length - 1);
}
// 删除表格中第一列选中的行
function deleteRows(table)
{
   var i = table.rows.length - 1;

   // 遍历表格中的所有行
   while(i >= 1)
   {
      // 如果表格第1列中的选择框选中的话,就将该行删除

      // 获取到表格的第i行 :                            table.rows[i]

      // 获取第i行的第1个TD对象:                        table.rows[i].childNodes.item(0)

      // 获取第i行的第1个TD对象中的第一个对象:           table.rows[i].childNodes.item(0).childNodes.item(0)

      // 获取第i行的第1个TD对象中的第一个对象的checked值:table.rows[i].childNodes.item(0).childNodes.item(0).checked
      if(table.rows[i].childNodes.item(0).childNodes.item(0).checked == true)
      {
         if(i == 1)
         window.alert("不允许删除最后一行数据!");
         else
         table.deleteRow(i);
      }
      i = i - 1;
   }
}
</script>
分享到:
评论

相关推荐

    自动增加删除表格行代码(纯JS)

    ### 自动增加删除表格行代码(纯JS) 在网页开发中,动态地操作HTML元素是一项常见且实用的功能。本文将详细介绍如何使用纯JavaScript实现表格行的自动增加与删除功能,以及如何为表格中的特定单元格添加当前日期。...

    js实现添加删除一行。每一行下面可以再添加一行。序号自动改变

    在JavaScript编程中,实现...通过以上步骤,我们可以实现一个功能完备的表格动态添加删除行的JS特效,同时确保序号的自动更新和Tab切换效果。这样的功能在许多Web应用中都有广泛的应用,比如数据录入、配置管理等场景。

    自动增加行的动态表格

    标题“自动增加行的动态表格”揭示了这个项目的核心功能,即实现一个表格,当用户在其中输入数据或达到特定条件时,能够自动添加新的行。这种技术在数据输入、管理或者展示应用中非常常见,比如在线表单、数据库前端...

    js javascript自动编号 编号递增

    在JavaScript编程中,"js javascript自动编号 编号递增"这一主题涉及到如何设计一个功能,使得能够自动为带有特定前缀(例如"0X")的数字字符串进行递增。这种需求通常出现在数据管理、序列化或者创建唯一标识符等...

    js增加删除行html加javascript

    js练习中,不过前面的数还不能自动排,是一个不错的例子,对学js初学者会有启示。

    js 实现 表格按Enter键自动生成新行

    js 实现 表格按Enter键自动生成新行! 值得下载看看!资源免费,大家分享!!

    JS自动登录

    5. **安全考虑**:虽然JS自动登录为用户提供便利,但也会增加安全风险。如果恶意代码能够访问到存储的登录信息,那么用户的账号可能被盗。因此,服务器端验证仍然是必要的,不能完全依赖客户端的自动登录功能。 6. ...

    纯javascript增加删除表格行

    4. **动态交互**:为了使用户体验更好,可以添加更多的交互功能,比如禁用删除按钮,或者在添加行时自动填充数据。这可以通过检查特定条件或使用`addEventListener`来实现。 5. **性能优化**:在处理大量数据时,应...

    JS 实现Table相同行的单元格自动合并示例代码

    在HTML文档中使用JavaScript来自动合并表格中相同行的单元格是一种常见的前端开发技术。这种技术可以提高页面的可读性,尤其是在处理具有相同值的重复数据时。上述代码示例提供了一种简单而有效的方法来实现这一功能...

    ajax jquery 自动增加行

    本篇将详细探讨如何使用Ajax和jQuery实现表格数据的自动增加行功能。 首先,让我们了解Ajax的基础。Ajax是一种在不重新加载整个网页的情况下,能够更新部分网页的技术。它通过JavaScript发送异步HTTP请求到服务器,...

    javascript图片自动旋转

    在JavaScript中实现图片自动旋转是一项常见的任务,尤其在动态展示或者动画效果中。这个功能的实现主要涉及到HTML、CSS和JavaScript三者的结合。下面将详细解释如何使用JavaScript来完成图片的自动旋转。 首先,...

    JS对表格的动态增加删除行 (多个demo)

    博文中的“多个demo”可能包含了不同的场景和交互方式,比如通过按钮触发增加或删除行,或者根据用户输入自动添加行等。这些示例可以帮助开发者理解不同情况下的实现方法。 6. **事件监听**: JavaScript可以监听...

    自动求解的javascript 迷宫游戏

    **迷宫游戏与JavaScript自动化求解** 在编程领域,迷宫游戏是一种常见的练习项目,它涉及到路径搜索算法、数据结构以及用户交互等多个方面。在这个基于JavaScript的迷宫游戏中,开发者在原有的基础上进行了优化,...

    js代码 图片自动播放

    从给定的文件信息来看,该段代码主要实现了利用JavaScript(JS)进行图片的自动播放功能,这在网站设计和动态展示中非常常见。下面,我们将深入解析这段代码中的关键知识点,包括其工作原理、实现机制以及可能的优化...

    JavaScript自动跳转页面代码

    ### JavaScript自动跳转页面代码详解 #### 一、概述 在Web开发中,有时我们需要实现页面的自动跳转功能,比如在登录成功后自动跳转到首页,或者在完成某个操作后自动返回上一页等场景。本文将详细介绍一个简单的...

    自动给html文件内的引用资源增加版本号;JS自动版本生成

    自动给html文件内的引用资源增加版本号,环境是python2.7, 可以直接编辑.py文件,在里面设置忽略的引用。 在html内部查找style 和js 引用,并在文件名称后面加上 ?v=23452(随机)

    js图片自动滚动

    在本案例中,“js图片自动滚动”是一个使用JavaScript实现的网页功能,它能够让图片在网页上按照预设的方式自动滚动展示,提升用户体验,特别是在产品展示、新闻轮播等场景下尤为常见。 首先,我们要理解JavaScript...

    js实现输入框输入的自动匹配功能

    `InputAutoFix.js`是核心的JavaScript脚本,它很可能包含了输入框自动匹配功能的主要逻辑。通常,这种功能会监听输入框的`input`或`keyup`事件,当用户键入字符时触发匹配过程。匹配算法可能包括字符串的模糊匹配、...

    自动隐藏的弹性返回顶部JS代码

    标签“自动隐藏的弹性返回顶部JS代码.rar”进一步强调了这个压缩包的内容,它是关于JavaScript代码,用于创建一个可自动隐藏且具有弹性的返回顶部按钮。 压缩包内的文件名称列表如下: 1. 一流素材网.html:这可能...

Global site tag (gtag.js) - Google Analytics