`

JavaScript动态添加删除表格行

js 
阅读更多
<table id="idTB" border=0><!--注意id,与JS中的要相对应-->
  <tr id=idTR>
    <td>第一行 <input type='button'></td>
  </tr>
</table>
<input type="button" onclick="addRow()" value="添加一行"><br>
<input type="button" onclick="delRow()" value="删除一行"> Row index:<input id="idIndex">(<a id="idFirst">1</a>~<a id="idLast">1</a>)
<script>
function addRow(){//添加表格的一行
  oTR=idTB.insertRow(idTB.rows.length);
  tmpNum=oTR.rowIndex;
  oTD=oTR.insertCell(0);
  oTD.innerText="第" + tmpNum+"行";//在该处添加的HTML代码会原封不动的显示在页面上
  oTD.innerHTML="<input type='text' name='txt"+tmpNum+"'>";//要在该格添加的HTML代码填在这里,因为这里是text,注意不要重名了。
  idLast.innerText=idTB.rows.length;
  if(idTB.rows.length>0)
    idFirst.innerText='1';
  return true;
}
function delRow(){//删除表格的一行
  sIndex=idIndex.value;
  if(sIndex=='')
    sIndex=idTB.rows.length-1;
  else
    sIndex=parseInt(sIndex)-1;
   
idTB.deleteRow(sIndex);
 
  idLast.innerText=idTB.rows.length;
  if(idTB.rows.length==0)
    idFirst.innerText='0';
}
</script>


http://www.cnblogs.com/rhodamine/archive/2006/07/18/453430.html
http://www.cnblogs.com/jjiac/archive/2005/10/10/251640.html
http://www.blogjava.net/lpeter/archive/2007/05/28/120536.html
http://blog.csdn.net/fatowen/article/details/6257610
分享到:
评论

相关推荐

    javascript动态添加表格数据行

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

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

    NULL 博文链接:https://1148130696.iteye.com/blog/1726191

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

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

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

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

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

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

    JS动态增加删除表格行

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

    jQuery 动态添加或删除表格行

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

    纯javascript增加删除表格行

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

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

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

    js 添加删除表格

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

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

    4. **数据管理**:如果表格数据存储在JavaScript数组中,那么在添加、删除或编辑行时,也应同步更新数组。这有助于保持数据的一致性,并可能用于其他操作,如排序或过滤。 5. **模板字符串**:在创建新的HTML元素时...

    js动态添加删除表格

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

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

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

    动态插入、添加删除表格行的JS代码

    ### 动态插入、添加删除表格行的JS代码 在网页开发中,表格是一个非常重要的元素,用于展示数据。为了使网页更具交互性,我们常常需要动态地对表格进行操作,比如插入或删除行等。本文将通过一个具体的示例来讲解...

    JavaScript动态添加表格行(使用模板、标记)

    在JavaScript编程中,动态添加表格行是一项常见的任务,特别是在创建数据展示或编辑功能时。本文将深入探讨如何使用模板和标记技术来实现这一功能。首先,我们先了解一下基本概念。 **1. 模板(Template)** 模板是...

    javascript动态操作表格

    接下来是删除表格。这通常涉及到找到特定的表格元素并使用`removeChild()`方法移除它们。例如,要删除刚才创建的表格,你可以这样操作: ```javascript // 假设我们保存了表格引用 document.body.removeChild(table...

Global site tag (gtag.js) - Google Analytics