JavaScript 动态表格的实现，效果：当点击最后一行时，动态生成新的一行。实现了文本框、单选框、下拉框的动态生成。
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ActiveTable 动态表格</title>
</head>
<h2>员工信息统计表</h2>
<body>
<table id="activetable" border="1" >
<tr><th>工 号</th><th>姓 名</th><th>性 别</th><th>职 务</th></tr>
<tr>
<td><input type="text" name="number" size="8" onclick="addRow();"></td>
<td><input type="text" name="realname" size="18"></td>
<td><input type="radio" name="sex" value="男" checked="checked" size="6"><label>男</label>
<input type="radio" name="sex" value="女" size="6"><label>女</label>
</td>
<td>
<select name="duty" style="width: 100px;">
<option value="manager">经理</option>
<option value="assistantmanager">副经理</option>
<option value="employee">员工</option>
</select>
</td>
</tr>
</table>
</body>
<script type="text/javascript">
function addRow(){
var activetable = document.getElementById("activetable"); //找到表格
var tr = document.createElement("tr"); //创建一行
var td1 = document.createElement("td"); //创建第一个td，工号
var numberField=document.createElement("input");
numberField.setAttribute("type", "text");
numberField.setAttribute("name", "number");
numberField.setAttribute("size","8"); //宽度为8个字符
numberField.setAttribute("onclick","addRow()"); //为其添加onclick事件
td1.appendChild(numberField); //将input放入td1
tr.appendChild(td1); //将td1放入tr
var td2 = document.createElement("td"); //创建第二个td,姓名
var realnameField=document.createElement("input");
realnameField.setAttribute("type", "text");
realnameField.setAttribute("name", "number");
realnameField.setAttribute("size", "18");
td2.appendChild(realnameField);
tr.appendChild(td2);
var td3 = document.createElement("td"); //创建第三个td,性别
var maleField = document.createElement("input");
maleField.setAttribute("type","radio"); //创建radio,"男"
maleField.setAttribute("checked","checked");
var textMale = document.createTextNode("男"); //创建文本节点,"男"
var femaleField = document.createElement("input");
femaleField.setAttribute("type","radio"); //创建radio,"女"
var textFemale = document.createTextNode(" 女 "); //创建文本节点，"女"
td3.appendChild(maleField);
td3.appendChild(textMale);
td3.appendChild(femaleField);
td3.appendChild(textFemale);
tr.appendChild(td3);
var td4 = document.createElement("td"); //创建第四个td,职务
var dutyField= document.createElement("select"); //创建下拉框
dutyField.setAttribute("name","duty");
dutyField.setAttribute("style","width:100px"); //设置下拉框宽度为100px
dutyField.appendChild( createOption("经理 "));
dutyField.appendChild( createOption("副经理 "));
dutyField.appendChild( createOption("员工 "));
td4.appendChild(dutyField);
tr.appendChild(td4);
var tbody=activetable.children[0];
tbody.appendChild(tr);
var trArray=tbody.children;
var lastTR=trArray[trArray.length-2]; //取得倒数第2个tr
var lastInput=lastTR.children[0].children[0]; //第1个格子中的输入框
lastInput.removeAttribute("onclick"); //去掉倒数第二行第一格的onclick事件
}
function createOption(text){ //由文本生成文本节点，用于创建select的option
var option=document.createElement("option");
option.setAttribute("value",text);
option.appendChild(document.createTextNode(text));
return option;
}
</script>
</html>
效果图：
分享到：
相关推荐
用JavaScript制作的动态表格，有添加、删除、全选、全不选，有对动态新增的域校验问题，有对新增的域设置readonly问题，还有对新增域中的span进行隐藏问题都有解决，还有对动态表格的讲解PPT一份。
本文将深入探讨如何使用JavaScript来创建可变化、可编辑的表格，以实现更丰富的用户界面。 首先，我们要明白HTML表格的基本结构，通常由`<table>`, `<tr>`, `<td>`和`<th>`等元素组成。JavaScript可以通过操作DOM...
本文将深入探讨如何使用JavaScript来制作统计图表，以及涉及的相关技术。 首先，JavaScript中的图表库通常提供了一个丰富的API，允许开发者通过简单的代码调用来创建各种类型的图表，如柱状图、折线图、饼图、散点...
最后，源代码中可能包含了一些实际的网页项目，比如计时器、动态图表、下拉菜单、图片轮播等，这些都是JavaScript在网页制作中常见且实用的应用。通过阅读和分析这些代码，读者可以加深对JavaScript实际运用的理解，...
由于其灵活性和强大的功能，JavaScript可以用来制作各种各样的应用和效果，包括但不限于以下几个方面： 1. **网页动态效果**：JavaScript 可以改变HTML元素的样式、位置，实现动画效果，如滑动菜单、轮播图、滚动条...
《HTML+CSS+JavaScript网页制作案例教程（第2版）》是一本全面涵盖网页制作基础知识与实践技巧的教材。此教学大纲旨在引导学生系统学习网页设计的核心技术，通过理论讲解和实际案例，使学习者掌握网页开发的基本流程...
JavaScript 和 DHTMLX 图形图表制作是Web开发中用于创建动态和交互式数据可视化的技术。DHTMLX是一个强大的JavaScript库，它提供了多种组件，包括图表（Chart）模块，可以帮助开发者构建高质量的数据图形。 首先，...
再者，JavaScript还可以用于创建动态图表。利用第三方库如Chart.js或D3.js，可以轻松绘制出数据可视化图表，这些图表可以随着数据的变化实时更新，为网站增添生动的信息展示。 JavaScript还有强大的DOM操作能力，...
这个主题“JavaScript网页制作特效”涵盖了如何使用JavaScript技术来提升网页的视觉吸引力和用户体验。下面将详细介绍JavaScript在网页制作特效中的应用及其相关知识点。 1. **DOM操作**：JavaScript与Document ...
在这个"javascript制作的日历小应用！"项目中，我们将会探讨如何使用JavaScript来创建一个功能丰富的日历组件。 首先，让我们了解日历小应用的基本构成。一个基本的日历应用通常包括显示当前日期、允许用户切换月份...
在VC++开发环境中，制作报表是一项常见的任务，尤其在企业级应用中，动态生成和展示数据报表至关重要。DHTML（Dynamic HTML）是一种增强网页交互性和动态效果的技术，它结合了HTML、CSS和JavaScript的能力，使得在...
标题和描述中提到的"JQ JS javascript echarts 多图表 多曲线 多柱状图 多饼图 多仪表盘 加载 多图表加载"，是指使用jQuery、JavaScript和ECharts库来创建一个单页面应用，该应用能够同时加载和展示多种图表，包括...
本文介绍了如何使用JavaScript制作无缝的连续滚动广告效果，实现多行文字从下向上垂直连续不断地滚动，并且当鼠标移到滚动文字上就停止滚动，否则继续滚动。 知识点： 1. JavaScript是一种基于事件触发的脚本语言...
例如，制作个人简历网页、电子商务网站模板或动态效果展示页等。 7. 性能优化与最佳实践：学习如何编写可维护、高效的代码，了解网页性能优化策略，如减少HTTP请求、压缩资源、合理利用缓存等。 通过这本书的学习...
amCharts是一个流行的JavaScript图表库，但通过一些技巧，我们可以将其与C#后端集成，实现动态数据更新和各种图表类型，如饼图、柱状图、曲线图以及XY坐标图。 首先，让我们了解一下amCharts。这是一个开源的图表库...
7. **表单验证**：在用户提交信息前，使用JavaScript进行表单验证，如必填项检查、邮箱格式验证，避免无效数据提交。 8. **轮播图和幻灯片**：展示公司介绍、职位亮点等内容，JavaScript可以控制图片切换，增加视觉...
Highcharts是一款广泛应用于Web开发中的JavaScript图表库，它允许开发者轻松创建各种动态、交互式的图表，包括但不限于直线图、曲线图、区域图、区域曲线图、柱状图、饼图和散点图等。这个库以其灵活性、易用性和...
### PHP 动态表格制作常用小技巧 #### 1. 使用 JavaScript 动态生成 HTML 表格 在 Web 开发中，动态生成 HTML 表格是一项常见需求，尤其是在需要用户实时添加或删除表格行的情况下。这里提供了一个示例，演示如何...
这篇文章将深入探讨如何使用JavaScript来创建各种招聘网站的特效，包括滚动动画、交互式按钮、动态图表以及响应式布局等。 首先，JavaScript在招聘网站中的应用主要体现在增强用户体验上。例如，可以使用JavaScript...