<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<title>Form Object example</title>
<head>
<script language="javascript">
function delrow1() {
var oElement = event.srcElement;
while (oElement.tagName != "TR") {
oElement = oElement.parentElement;
}
var oTBody = oElement.parentElement;
oTBody.removeChild(oElement);
}
function delrow2()//刪除当前行
{
var currRowIndex = event.srcElement.parentNode.parentNode.rowIndex;
document.all.yltable.deleteRow(currRowIndex); //table10--表格id
}
function insertrow1() //增加的一行方法1
{
var newnode = document.getElementById('yltable').lastChild.cloneNode(true);
document.getElementById('yltable').appendChild(newnode);
}
function insertrow2() //增加的一行方法2
{
var newRow = document.all.yltable.insertRow(-1);
var j_1 = document.all.yltable.rows.length;
var newcell = newRow.insertCell();
newRow.bgColor = '#FFFFFF';
newcell.align = 'center';
newcell.innerHTML = "" + j_1 + "";
newcell = newRow.insertCell();
newRow.bgColor = '#FFFFFF';
newcell.align = 'center';
newcell.innerHTML = "<input type='text' name='ylText" + j_1 + "' />";
newcell = newRow.insertCell();
newRow.bgColor = '#FFFFFF';
newcell.align = 'center';
newcell.innerHTML = '<input name="button3" type="button" onClick="delrow1()" value="删除1"> <input name="button3" type="button" onClick="delrow2()" value="删除2">';
document.all.yltable.focus();
}
function inserttable() {
var newnode = document.getElementById('yltable').cloneNode(true);
document.getElementById('ylform').appendChild(newnode);
}
</script>
</head>
<body>
<form name="ylform" id="ylform">
<center>
<input name="button" type="button" onclick="inserttable()" value="增加表格">
<input name="button2" type="button" onclick="insertrow1()" value="增加一行1">
<input name="button22" type="button" onclick="insertrow2()" value="增加一行2">
</center>
<table border="1" align="center" width="50%" id="yltable">
<tbody id="yl1">
<tr>
<td width="30%" height="22">
<div align="center">
1</div>
</td>
<td width="40%">
<div align="center">
<input name="textfield" type="text" value="yl">
</div>
</td>
<td width="30%">
<div align="center">
<input name="button3" type="button" onclick="delrow1()" value="删除1">
<input name="button3" type="button" onclick="delrow2()" value="删除2">
</div>
</td>
</tr>
</tbody>
<tbody id="yl2">
<tr>
<td>
<div align="center">
2</div>
</td>
<td>
<div align="center">
<input name="textfield2" type="text" value="yanleigis">
</div>
</td>
<td>
<div align="center">
<input name="button3" type="button" onclick="delrow1()" value="删除1">
<input name="button3" type="button" onclick="delrow2()" value="删除2">
</div>
</td>
</tr>
</tbody>
<tbody id="yl3">
<tr>
<td>
<div align="center">
3</div>
</td>
<td>
<div align="center">
<input name="textfield22" type="text" value="Landgis@126.com">
</div>
</td>
<td>
<div align="center">
<input name="button3" type="button" onclick="delrow1()" value="删除1">
<input name="button3" type="button" onclick="delrow2()" value="删除2">
</div>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
文章来源
相关推荐
为了实现动态增删，我们需要用JavaScript来控制表格的行。首先，我们可以通过`document.getElementById()`获取到表格元素，并创建一些初始行。例如： ```javascript var table = document.getElementById('dynamic...
首先，要实现一个添加删除数据的示例，我们需要引入几个关键的库文件，包括Bootstrap的CSS和JS文件、Vue.js库以及jQuery库。文章中提供了Bootstrap的在线资源链接，这是为了确保可以使用最新版本的Bootstrap框架，...
3. **删除表格记录**： 在数据库操作中，例如删除记录，通常需要一个特定的ID。这里演示了如何获取DataGrid选中的记录ID，然后构造SQL删除语句进行删除。 4. **警告用户在删除表格记录前**： 在DataGrid的`...
- 使用`Response.Write`时应注意浏览器兼容性问题，尤其是JavaScript代码的写法。 - 考虑到用户体验，可以添加更多交互效果，如禁用按钮直到操作完成。 #### 四、总结 通过以上介绍，我们可以看到在`GridView`中...
接着，我们来看JavaScript部分，即`pages/wrongPage/index.js`。在这个Page对象中，定义了数据属性`list`，它是一个包含多个对象的数组，每个对象代表一个列表项的数据。此外，还有一个`selList`属性，用于存储被...
同样，也可以删除表格中的行： ```javascript table.deleteRow(index); // 删除指定索引的行 ``` #### 5. 事件绑定与委托 在实际应用中，可能需要为表格中的多个元素绑定事件，这时候使用事件委托可以更加高效： ``...
3. **删除表格选定记录**： 这段代码用于删除 DataGrid 控件中的选定记录。首先获取选定行的索引，然后构造 SQL DELETE 语句，根据记录的 ID 删除对应的数据。 4. **删除表格记录警告**： 在 DataGrid 的 ...
3. **删除表格选定记录**： 删除数据库中的记录通常涉及获取记录ID，构造SQL删除语句，然后执行该语句。示例中，通过`DataGrid`的`DataKeys`属性获取记录ID，构建并执行`DELETE`语句。 4. **删除记录警告**： 在...
8. **运行结果截图**：这部分应该是系统实际运行时的界面截图，展示了学生信息的列表、分页、添加、修改和删除等功能的效果。 总的来说，这个项目为初学者提供了一个学习Java Web开发与MySQL数据库结合的基础示例，...
Bootstrap的多标签页功能支持动态添加、删除和切换，可以轻松地与其他Bootstrap组件结合使用，如卡片、表格等。此外，还可以通过添加额外的类名，如`.justify-content-center`或`.justify-content-end`来调整Nav组件...
数据部分讲解了如何使用jqGrid进行数据的添加、删除、修改和检索操作，这对于构建动态的Web应用尤为重要。 通过这些知识点，我们可以了解到jqGrid不仅是一个用于展示数据的表格，它还包含丰富的功能，包括与服务器...
- `Object.seal()`方法会阻止新的属性被添加到对象上，并且现有的属性也不能被删除。 - `Object.freeze()`方法则进一步禁止了现有属性的任何更改，包括值的修改。 这两种方法都可以用于保护对象免受意外的修改。...
批量提交功能在数据处理中非常常见，特别是在需要用户选择多个记录进行统一操作的场景下，如删除、更新或审核等。以下是对标题和描述中所述知识点的详细说明： 1. **jQuery 选择器**： - `*` 选择器：匹配任何元素...
11.18 最优化的循环语句写法 11.19 如何构建最优化的字符串 11.20 使用jQuery产生GUID值 11.21 使用jQuery实现聚合函数 11.22 用jQuery打印网页的特定区域 11.23 禁止表单被提交 11.24 使用delay（）延迟执行动画 ...
在Web开发中，表格或列表中的数据经常需要进行批量操作，例如批量删除、批量修改状态等。此时，全选功能便显得尤为重要。它不仅可以提高用户体验，还能简化前端逻辑，使得用户能够更加方便快捷地对数据进行操作。 #...
其他选项中的写法均不符合JavaScript的语法规范。 ### 3. CPU 的组成 CPU（中央处理器）由**控制器**和**运算器**两大部分组成。控制器负责指令的解码和执行流程的控制；运算器则负责执行算术逻辑运算。 ### 4. ...
- **简化写法**：`$.get()` 和 `$.post()` 简化了 AJAX 请求的发送过程。 ### 五、插件开发与使用 #### 5.1 插件开发 - **定义插件**： ```javascript (function($) { $.fn.myPlugin = function(options) { //...
此外，`append()`、`prepend()`、`remove()`等方法则用于动态添加、插入或删除DOM元素。 2. **事件处理** jQuery提供了优雅的事件处理方式，如`click()`、`mouseover()`、`mouseout()`等，可以方便地绑定和解绑...