<html>
<head>
<title>表格插入行与删除行示例</title>
<script type="text/javascript">
//参数列表[表格Id,复制行的索引,标题行数,表单Id]
function clickInsert(inputTable,rowId,titleRow,inputForm){
var oForm=document.getElementById(inputForm);
var oTable=document.getElementById(inputTable);
var obj =window.event.srcElement;
var oTd = obj.parentElement;
var oTr = oTd.parentElement;
var oRow = oTr.rowIndex;
var oTr1 = oTable.insertRow(oRow+1);
var oCells = oTr.cells;
for(i=0;i<oCells.length;i++){
var cell = oCells[i].innerHTML;
var cell1 = oTr1.insertCell(i);
cell1.innerHTML=cell;
}
oForm.flag[oRow+1-titleRow].value="1";
//alert(oForm.flag[oRow+1-titleRow].value="1");
}
//参数列表[表格Id,标题行数,表单Id]
function clickDelete(inputTable,titleRow,inputForm){
var oForm=document.getElementById(inputForm);
var oTable=document.getElementById(inputTable);
var obj =window.event.srcElement;
var oTd = obj.parentElement;
var oTr = oTd.parentElement;
var oRow = oTr.rowIndex;
oTr.style.display="none";
oForm.flag[oRow-titleRow].value="2";
// alert(oForm.flag[oRow-titleRow].value);
}
function submitForm(){
var flags= inputForm.flag;
for(i=0;i<flags.length;i++){
alert(flags[i].value);
}
}
</script>
</head>
<body>
<form action="" name="inputForm" id="inputForm">
<table id="inputTable" width="50%" align="center" border="1" cellpadding="0"
cellspacing="0">
<tr>
<td>
学生
</td>
<td>
课程
</td>
<td>
</td>
<td>
</td>
</tr>
<tr style="display: none;">
<td>
<input type="hidden" name="flag" id="flag" value="-1" />
<select id="studentId">
<option value="01">
张三
</option>
<option value="02">
李四
</option>
</select>
</td>
<td>
<select id="courseId">
<option value="01">
英语
</option>
<option value="02">
数学
</option>
</select>
</td>
<td>
<input type="button" name="insertButton" value="新增" />
</td>
<td>
<input type="button" name="deleteButton" value="删除" />
</td>
</tr>
<tr>
<td>
<input type="hidden" name="flag" id="flag" value="1" />
<select id="studentId">
<option value="01">
张三
</option>
<option value="02">
李四
</option>
</select>
</td>
<td>
<select id="courseId">
<option value="01">
英语
</option>
<option value="02">
数学
</option>
</select>
</td>
<td>
<input type="button" name="insertButton" value="新增"
onclick="clickInsert('inputTable',1,1,'inputForm')" />
</td>
<td>
<input type="button" name="deleteButton" value="删除"
onclick="clickDelete('inputTable',1,'inputForm')" />
</td>
</tr>
</table>
<br />
<center><input type="button" name="submitButton" value="提交" onclick="submitForm()" /></center>
</form>
</body>
</html>
分享到：
相关推荐
此外，还可以扩展这个功能，比如添加验证、编辑和删除行的功能，或者使用AJAX从服务器获取数据并动态插入。这需要更深入地理解DOM操作和JavaScript事件处理。 总结来说，"表格动态插入行"是JavaScript在网页开发中...
本文将通过一个具体的示例来讲解如何使用JavaScript实现动态插入和删除表格行的功能。 #### 一、核心概念与原理 1. **DOM (Document Object Model)**：DOM 是一种标准，用于表示 HTML 和 XML 文档的结构。它定义了...
这篇博客文章“表格动态追加、插入、删除行”可能详细介绍了如何在网页中实现这些操作。虽然没有提供直接的博客内容，但我们可以根据这个主题进行深入的讨论。 首先，我们要理解表格（Table）在HTML中的基本结构。...
本资源“Layui表格行添加编辑删除操作和保存数据代码.zip”包含了一个完整的示例，演示了如何在Layui表格中实现动态的行添加、编辑和删除功能，并且将这些操作与数据保存相结合。下面我们将详细探讨这些知识点。 ...
以下是一个简单的例子，展示如何使用JavaScript添加和删除表格行： ```javascript // 获取表格元素 var table = document.getElementById('myTable'); // 添加行 function addRow() { var row = table.insertRow...
本主题聚焦于一款能够实现类似Excel功能的前端表格工具，它允许用户进行编辑、合并单元格、删除和插入行等操作，极大地提高了数据管理和交互的便利性。下面将详细探讨这款表格组件的关键特性和实现技术。 首先，该...
`DragEnter`和`DragOver`事件处理拖放过程中行的插入和删除，确保行在正确的位置上。 此外，我们还需要在`MainForm_Load`事件中禁用自动调整行高度的功能，因为这可能会影响行拖动的视觉效果： ```csharp private ...
本文将深入探讨如何使用纯JavaScript实现表格的排序、插入、删除、移动行或列以及导出功能，同时还会提到如何增加表头。 首先，让我们讨论表格排序。在JavaScript中，我们可以获取表格元素，然后对数据进行比较以...
在IT行业中，尤其是在Web开发领域，表格是一种常用的数据展示方式，用户经常需要对表格中的行进行动态添加或删除操作。这篇博文"表格行记录动态增加和删除"主要探讨了如何在网页应用中实现这一功能，这通常是通过...
标题 "jquery实现的可增加，删除行，可多行上下移动表格" 描述了一种使用JavaScript库jQuery创建的交互式表格功能。这个功能允许用户在表格中动态添加、删除行，以及上下移动表格中的行，提供了更灵活的数据操作体验...
动态添加和删除行通常涉及向现有表格动态插入或移除这些元素。 1. **动态添加行**： - 使用jQuery，可以获取表格引用，例如`$("#myTable")`，其中`#myTable`是表格的ID。 - 创建新的`<tr>`元素，可以使用`$('<tr>...
本话题将深入探讨如何实现一个动态表格，用户可以适时添加、删除和复制表格中的行。 首先，我们需要理解Ajax的工作原理。它通过JavaScript发送异步HTTP请求到服务器，获取或提交数据，然后使用JavaScript处理这些...
本示例“jquery表格动态添加删除行代码”利用jQuery的强大功能，为用户提供了一个直观且用户友好的表格管理体验。这个代码实现了一个功能，即在表格中动态地添加和删除行，这对于数据展示和编辑是非常实用的。 首先...
总结来说，这个示例演示了如何利用jQuery在JavaScript中动态地操作HTML表格，包括添加新行（通过创建`<tr>`和`<td>`元素并添加到表格中）以及删除行（通过选择器选取并移除特定行）。这些基本操作在构建交互式Web...
在开发Web应用时，动态添加和删除表格行是常见的需求，尤其在数据管理或表单填写场景中。本文将深入探讨如何使用C#后端和JavaScript前端技术来实现这一功能，为初学者提供一个基础的实践指导。 首先，我们要了解...
删除行功能通常与表格行关联一个删除按钮，当用户点击该按钮时，触发对应的事件处理函数。处理函数获取到被选中的行，然后使用Layui的API或DOM操作将其从表格中移除。可能的API如`table.del`或直接删除DOM元素。 4...
通过以上解析，我们可以看出，该示例代码主要利用了JavaScript的DOM操作能力，结合HTML结构，实现了动态添加、删除以及调整表格行位置的功能。这种技术广泛应用于表单动态构建、数据编辑等场景，极大地提高了Web应用...
总结来说，这个示例展示了如何使用JavaScript在前端动态添加表格行，以及如何通过表单提交这些数据到服务器。虽然例子使用的是较旧的技术（如IE6和ASP），但基本的JavaScript逻辑仍然适用于现代Web开发。在现代Web...
在这个例子中，DOM操作用于动态地向表格中插入新的行（`insertRow`）和单元格（`insertCell`）。 2. 表格操作：表格是HTML中表示表格数据的结构，由`<table>`、`<tr>`（表格行）、`<td>`（表格数据单元格）或`<th>`...