<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实现这一功能。通过给定的标签"源码"和"工具",我们可以推测这篇文章会包含实际的代码示例和实用方法。 在HTML中,`<table>`元素用于创建...
首先,动态添加删除表格通常基于HTML、CSS和JavaScript(或者更高级的库如jQuery、React、Vue等)进行构建。HTML用于创建表格的基本结构,CSS用于美化和布局,JavaScript则负责提供动态交互性。 在HTML中,`<table>...
在JavaScript编程中,动态添加表格数据行是一种常见的需求,特别是在构建交互式的Web应用程序时。这个功能允许用户在不刷新整个页面的情况下添加新的记录,提高了用户体验。在这个例子中,我们将探讨如何利用...
JavaScript动态操作表格,添加,删除行、列及单元格! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
这个案例主要涉及了如何使用JavaScript来实现表格的添加、删除等基本操作。这些功能对于网页交互性和用户体验有着重要的作用,尤其适合初学者进行学习和实践。 首先,`students.html`文件很可能是用来展示表格结构...
在JavaScript中,动态添加和删除表格是常见的网页交互功能,主要应用于数据展示、表单处理等场景。这篇博文通过一个简单的实例,展示了如何利用JavaScript实现这个功能。在讲解之前,我们先了解一下HTML表格的基本...
在开发Web应用时,动态添加和删除表格行是常见的需求,尤其在数据管理或表单填写场景中。本文将深入探讨如何使用C#后端和JavaScript前端技术来实现这一功能,为初学者提供一个基础的实践指导。 首先,我们要了解...
NULL 博文链接:https://1148130696.iteye.com/blog/1726191
以下是一个简单的例子,展示如何使用JavaScript添加和删除表格行: ```javascript // 获取表格元素 var table = document.getElementById('myTable'); // 添加行 function addRow() { var row = table.insertRow...
总的来说,"jquery表格动态添加删除行代码"是一个结合了HTML、CSS和JavaScript(主要是jQuery)的示例,它展示了如何利用这些技术来实现动态交互的表格功能。这样的功能在许多Web应用程序中都有广泛的应用,例如在线...
本篇文章将深入探讨如何使用JavaScript自动添加、删除表格,以及实现窗口居中显示的相关技术。 首先,让我们来理解“JavaScript自动添加表格”。在HTML中,表格由`<table>`元素定义,行(`<tr>`)、列(`<td>`或`<th>`...
接下来是删除表格。这通常涉及到找到特定的表格元素并使用`removeChild()`方法移除它们。例如,要删除刚才创建的表格,你可以这样操作: ```javascript // 假设我们保存了表格引用 document.body.removeChild(table...
本项目提供了一个基于Bootstrap样式的vue动态添加删除表格数据的示例。 首先,我们需要了解基本的Vue.js概念。Vue实例是应用的核心,它包含了数据(data)、方法(methods)、计算属性(computed)等。在这个项目中...
* 在删除表格的行时,表格的行数会马上变化,因此需要注意循环删除的顺序 * 使用 `deleteRow()` 和 `deleteCell()` 方法时,需要传入正确的参数 index 动态设置单元格和行的属性 * 使用 `setAttribute()` 方法:...
本文将深入探讨如何使用JavaScript动态地增加和删除表格行。 首先,我们来了解一下HTML表格的基本结构。一个表格由`<table>`元素包含,其中包含`<tr>`(表格行)元素,每行内可以有多个`<td>`(表格数据单元格)或`...
在网页开发中,jQuery库因其简洁的语法和强大的功能,被广泛用于处理DOM操作,包括动态添加和删除表格行。本篇文章将详细讲解如何利用jQuery实现这两种操作。 首先,我们来理解HTML表格的基本结构。一个表格由`...
3. **删除行**:删除表格行通常涉及到选择要删除的行,并调用`removeChild()`方法。例如,假设我们想删除点击时的当前行,可以这样实现: ```javascript function deleteRow(event) { if (confirm('确定要删除...