<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 动态表单操作 </TITLE>
<script>
function add(){
var tbody = document.getElementById("tbody");
var rowNo = tbody.rows.length;
tbody.insertRow(rowNo);
tbody.rows[rowNo].insertCell(0);
tbody.rows[rowNo].cells[0].innerText="0001";//innerText 和innerHTML
tbody.rows[rowNo].insertCell(1);
tbody.rows[rowNo].cells[1].appendChild(document.createTextNode("计软0407"));
tbody.rows[rowNo].insertCell(2);
tbody.rows[rowNo].cells[2].appendChild(document.createTextNode("周帅"+rowNo));
tbody.rows[rowNo].insertCell(3);
var button = document.createElement("input");
button.type="button";
button.value="删除";
button.onclick="javascript:alert(0)";//不知道为啥不可以
tbody.rows[rowNo].cells[3].innerHTML="<input type='button' value='删除' onclick='deleteRow()'/>";
}
function deleteRow(){
var rowNo = window.event.srcElement.parentElement.parentElement.rowIndex;
var tbody = document.getElementById("tbody");
tbody.deleteRow(rowNo);
}
</script>
</HEAD>
<BODY>
<TABLE border="1">
<tbody id="tbody">
<tr>
<td>学号</td>
<td>班级</td>
<td>姓名</td>
<td>操作</td>
</tr>
</tbody>
</table>
<button onclick="add()" value="添加">添加</button>
</BODY>
</HTML>
分享到：
相关推荐
这通常用于展示数据集，允许用户进行交互操作，比如删除、编辑或查看详情。 首先，我们需要理解基本的HTML `<table>` 结构，它由`<tr>`（表格行）组成，每一行中包含若干个`<td>`（表格数据单元格）。如果需要添加...
8. **表格操作**：在HTML中，`<table>`元素及其子元素（`<tr>`, `<td>`, `<th>`等）可以通过DOM进行操作，例如，添加或删除行和单元格。 9. **表单操作**：DOM也允许我们处理表单元素，如`<input>`, `<select>`, `...
在JavaScript编程中，对HTML表格（table）进行选中操作是一项常见的需求，特别是在开发交互性强的Web应用时。本文将详细讲解如何实现客户端对table表的选中操作，并获取选中行的相关信息。 首先，我们需要了解HTML...
在JavaScript编程中，DOM（Document Object Model）是用于表示HTML或XML文档的一种树形...这不仅锻炼了JavaScript操作DOM的能力，也加深了对数据管理的理解。记住，实践是最好的老师，动手尝试是掌握这些技巧的关键。
8. **表格排序**：通过JavaScript实现表格数据的排序，这通常涉及到对数据数组进行排序，然后更新DOM。例如，可以使用`sort()`函数对数组排序，再更新`<tr>`元素的位置。 9. **表格数据绑定**：当表格数据来源于...
在JavaScript中，我们可以通过DOM操作来获取这些元素并进行处理。 1. **监听表头点击事件**： 我们可以使用`addEventListener`为表头添加点击事件监听器，当用户点击表头时触发排序功能。例如： ```javascript ...
1 展示了一个动态操作表格的例子 2 有简单的CSS布局 3 主要供自己查阅参考
本主题将深入探讨如何使用jQuery实现对HTML表格（table）的动态操作，包括多选和反选功能，这对于数据展示和用户交互至关重要。 一、jQuery与表格操作 1. 创建与删除表格元素： jQuery提供了方便的方法来创建和...
在JavaScript中，对HTML表格（`<table>`元素）进行添加和删除行的操作是常见的前端开发任务，尤其在动态展示数据或用户交互场景下。这篇博文主要探讨如何使用JavaScript实现这些功能。 首先，我们需要理解HTML表格...
在这个“全面的table操作解压即可使用”的压缩包中，我们可以期待找到一系列关于如何使用jQuery来增强HTML表格功能的代码示例和教程。 首先，`table排序`是网页表格常用的功能之一。在jQuery中，可以使用插件如...
jQuery操作Table技巧大汇总主要涵盖了如何使用jQuery对HTML表格进行一系列的交互和样式修改，包括鼠标响应、样式调整、行和列的隐藏与删除，以及单元格内容的获取与设置等。以下是对这些技巧的详细解释： 1. 鼠标...
在JavaScript的世界里，HTML表格（Table）是一...然而，实际开发中可能需要根据具体需求进行更复杂的定制和优化，这就需要开发者具备深厚的JavaScript和DOM操作基础。希望这个"JS操作table大全"能为你提供有用的参考。
DOM（Document Object Model）是HTML和XML文档的编程接口，通过JavaScript我们可以对表格中的每一行进行操作。在JavaScript中，我们可以通过`getElementById`或`querySelectorAll`等方法获取表格元素，并通过`...
jQuery是一个广泛使用的JavaScript库，简化了DOM操作、事件处理和Ajax交互。HTML表格（table）是网页中组织结构化数据的常见方式，而Excel则是一种流行的电子表格应用程序，用于处理和分析数据。 要将HTML表格转换...
通过DOM API，我们可以访问这些节点并进行操作。例如，`document.getElementById()`用于获取ID匹配的元素，`getElementsByTagName()`则用于根据标签名查找元素。 在XML文档中，数据通常以结构化的格式存储。例如，...
可以使用虚拟DOM技术，比如`React`，或者在内存中对数据进行排序，然后再一次性更新DOM，以提高效率。 5. **复杂数据类型的排序** 如果表格中的数据包含日期、数字或其他复杂类型，比较函数需要相应地处理。例如，...
DOM也允许对Cookie进行操作，可以设置、读取或删除Cookie，以实现用户的会话管理和个性化存储。 总结来说，DOM操作是Web开发中的基础技能，它赋予了开发者强大的能力，可以动态地构建、更新和交互网页内容，从而...
在JavaScript（JS）中，动态操作表格是一种常见的需求，它涉及到HTML DOM（Document Object Model）的元素操作。本文将深入探讨如何使用JavaScript实现对表格的动态添加、删除、修改和查询功能，结合给出的标签...
实验报告的主题是“JavaScript程序设计——DOM访问”，其...通过这样的实验，学生能够熟练掌握DOM操作，理解JavaScript如何与HTML页面进行交互，从而实现动态更新和操作页面内容，这对于前端开发来说是至关重要的技能。