`
fzx209
  • 浏览: 17096 次
社区版块
存档分类
最新评论

javaScript动态添加删除表格

阅读更多

<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(){//添加表格的一行
  //alert(idTB.rows.length)
  oTR=idTB.insertRow(idTB.rows.length);
  tmpNum=oTR.rowIndex;
  // alert(tmpNum)
  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;
 // alert(sIndex)
  if(sIndex=='')
    {
 sIndex=idTB.rows.length-1;
  alert(sIndex)
 }
  else
    sIndex=parseInt(sIndex)-1;
   
 idTB.deleteRow(sIndex);
 
  idLast.innerText=idTB.rows.length;
  if(idTB.rows.length==0)
    idFirst.innerText='0';
}
</script>





































分享到:
评论

相关推荐

    JavaScript动态添加删除表格行

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

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

    首先,动态添加删除表格通常基于HTML、CSS和JavaScript(或者更高级的库如jQuery、React、Vue等)进行构建。HTML用于创建表格的基本结构,CSS用于美化和布局,JavaScript则负责提供动态交互性。 在HTML中,`&lt;table&gt;...

    javascript动态添加表格数据行

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

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

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

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

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

    js动态添加删除表格

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

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

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

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

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

    js 添加删除表格

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

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

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

    JAVASCRIPT自动添加表格

    本篇文章将深入探讨如何使用JavaScript自动添加、删除表格,以及实现窗口居中显示的相关技术。 首先,让我们来理解“JavaScript自动添加表格”。在HTML中,表格由`&lt;table&gt;`元素定义,行(`&lt;tr&gt;`)、列(`&lt;td&gt;`或`&lt;th&gt;`...

    javascript动态操作表格

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

    vue动态添加删除表格数据代码

    本项目提供了一个基于Bootstrap样式的vue动态添加删除表格数据的示例。 首先,我们需要了解基本的Vue.js概念。Vue实例是应用的核心,它包含了数据(data)、方法(methods)、计算属性(computed)等。在这个项目中...

    javascript动态创建表格

    * 在删除表格的行时,表格的行数会马上变化,因此需要注意循环删除的顺序 * 使用 `deleteRow()` 和 `deleteCell()` 方法时,需要传入正确的参数 index 动态设置单元格和行的属性 * 使用 `setAttribute()` 方法:...

    jQuery 动态添加或删除表格行

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

    纯javascript增加删除表格行

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

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

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

Global site tag (gtag.js) - Google Analytics