除了使用innerHTML属性方便的控制信息在对应位置动态显示外，为了更加灵活地控制Web页面的动态效果，往往需要借助DOM提供的方法和属性对HTML文档进行操作，下面给出一个笔者刚刚做的一个动态添加的效果，当用户单击确认添加按钮时，在下方的表格里马上出现新增的信息，单击删除按钮时，马上删对应的信息，
对应的源码如下：<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="images/css.css" type="text/css" rel="stylesheet">
</head>
<script language="javascript" type="text/javascript">
// 增加成员函数
function addSort(){
var name = document.getElementById("name").value;
if(name == "" ){
return;
}
var row = document.createElement("tr");
row.setAttribute("id", name);
var cell = document.createElement("td");
cell.appendChild(document.createTextNode(name));
row.appendChild(cell);
var deleteButton = document.createElement("input");
deleteButton.setAttribute("type", "button");
deleteButton.setAttribute("value", "删除");
deleteButton.onclick = function () { deleteSort(name); };
cell = document.createElement("td");
cell.appendChild(deleteButton);
row.appendChild(cell);
document.getElementById("sortList").appendChild(row);
//清空输入框
document.getElementById("name").value = "";
}
// 删除成员函数
function deleteSort(id){
if (id!=null){
var rowToDelete = document.getElementById(id);
var sortList = document.getElementById("sortList");
sortList.removeChild(rowToDelete);
}
}
</script>
<table style="BORDER-COLLAPSE: collapse" bordercolor="#111111" cellspacing="0" cellpadding="2"
width="400" bgcolor="#f5efe7" border="0">
<tr>
<td align="middle" height="4" colspan="3">
<img height="4" src="images/promo_list_top.gif" width="100%" border="0" alt="">
</td>
</tr>
<tr>
<td align="middle" bgcolor="#dbc2b0" height="19" colspan="3">
<b>成员信息管理</b>
</td>
</tr>
<tr>
<td height="20">
增加新成员:
</td>
<td height="20">
<input id="name" type="text" size="15">
</td>
<td height="20">
<button onclick="addSort();">添加</button>
</td>
</tr>
<tr>
<td height="20">
成员信息管理:
</td>
</tr>
<table border="1" width="400">
<tr>
<td height="20" valign="top" align="center">
成员名称:
</td>
<td id="pos_1" height="20">
操作
</td>
</tr>
<tbody id="sortList"></tbody>
</table>
</table>
分享到：
相关推荐
Bootstrap动态表格模板是一种高效、美观且易于实现的前端开发工具，尤其适用于构建具有实时数据交互功能的网页应用。Bootstrap作为一款流行的开源前端框架，提供了一系列预定义的样式、组件和JavaScript插件，使得...
《Axure8动态图表插件：打造生动的原型设计》 在数字产品设计过程中，原型设计扮演着至关重要的角色，它能帮助设计师清晰地呈现产品的交互逻辑和视觉效果。Axure RP作为一款强大的原型工具，提供了丰富的功能来满足...
动态表格 java动态表格实现方法 很有用得 我找了很长时间的
《ArcGIS动态表格扩展模块——Mapping and Charting Solutions深度解析》 ArcGIS是Esri公司推出的全球领先的地理信息系统，广泛应用于地图制作、地理数据分析、空间建模等多个领域。其中，"Mapping and Charting ...
JS动态表格 JS动态表格JS动态表格体育意图一天uty一体uytuytutyu体育一体uytutyu体育
动态表格是网页设计中常见的需求，特别是在处理大量结构化数据时。本教程将重点讲解如何使用AngularJS来实现动态表格的功能。 AngularJS的核心概念之一是数据绑定，它允许开发者在视图（View）和模型（Model）之间...
在RP中点击载入元件库导入，轻松拖拽实现在RP中展示动态图表，包括饼图、折线图、柱状图、面积图、环形图等多种样式图表，满足原型设计动态完美展示。 在RP中点击载入元件库导入，轻松拖拽实现在RP中展示动态图表，...
在给定的“一组动态图表库交互工具Axure8”中，我们可以深入了解如何利用Axure8来创建具有动态效果的图表，从而提高原型的视觉吸引力和用户体验。 首先，动态图表在现代UI设计中扮演着至关重要的角色，它们能够直观...
在Excel中，动态图表是一种强大的数据可视化工具，它允许用户通过交互式地改变图表的某些元素，如轴范围、筛选条件或数据系列，来实时更新图表显示的信息。本课程聚焦于“EXCEL之图表系列课程(4) 动态图表”，旨在...
要在 PPT 里实现可以交互演示的动态图表（不是动画图表哦），可以有以下几种方法来实现： 1. PPT VBA 编程 2. Xcelsius 水晶易表 3. PowerBI/Tableau 仪表板网页嵌入PPT 4. PPT 链接跳转模拟 5. PPT 链接回 Excel ...
本例重点介绍了如何利用DBChart与多种数据库（Oracle、MySQL、SQL Server及Access）进行交互，动态生成数据图表。 首先，我们需要了解DBChart的基本用法。DBChart组件提供了丰富的图表样式和自定义选项，可以通过...
在本资源中，“网页模板——vue实现动态表格数据查询筛选代码.zip”是一个包含Vue.js实现的动态表格数据查询和筛选功能的代码示例。Vue.js是目前非常流行的前端JavaScript框架，它简化了网页开发，尤其是处理用户...
在Java和Web开发中，动态图表的编程是一个关键的领域，它涉及到数据可视化，使得复杂的数值信息能够以直观、易理解的方式呈现。本资源“Java+Web动态图表编程(PDF)”提供了一份详细的指南，帮助开发者掌握如何在Java...
### 动态表格生成 在HTML页面中，通常使用`<table>`标签来创建表格。而动态生成表格，是指根据数据的需要在页面加载完成后由JavaScript代码控制创建表格结构，而不是在HTML标签内直接书写。动态生成的好处在于，...
HTML是一种标记语言，用于创建网页结构，而动态表格则是HTML中的一个重要组成部分，特别是在构建交互式Web应用程序时。在这个“HTML完美动态表格(可编辑)”项目中，开发者利用HTML、JavaScript和CSS技术创建了一个...
在1.3.1版本中，动态表格列的实现是一个常见的需求，这涉及到表格的灵活性和可扩展性，使用户可以根据不同的数据或者权限展示不同的列。 动态表格列的实现通常包括以下几个关键步骤： 1. **数据准备**：首先，你...
本话题主要探讨如何使用C#在ASP.NET中通过DocX库来操作Word文件，以实现动态生成Word文档中的图表功能。 首先，`DocX`是一个开源的C#库，允许开发者在不使用Microsoft Office Interop的情况下，对Microsoft Word ....
在本实例中，我们主要探讨如何使用Java Web技术与ECharts库来实现动态图表的展示。ECharts是一款基于JavaScript的数据可视化库，广泛应用于Web前端的数据图表制作，它提供了丰富的图表类型，灵活的交互功能，以及...
在动态图表中，表格通常是数据源，它们的结构和数据更新会影响到关联的图表。 6. **动态范围(Dynamic Range)**: 动态范围是指使用公式来定义的范围，它会随着数据的变化自动扩展或收缩。在创建动态图表时，动态范围...