<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用JavaScript动态添加删除表中一行</title>
<style type="text/css">
body, td{
font-size:12px;
}
hr
{
height:3px;
width:30px;
border-style:solid;
border-width:3px 0 0 0;
border-color:#FF0000;
}
</style>
<script type="text/javascript">
var tbl;
var index = 1;
function insert() {
tbl = document.getElementById("tblSample");
var i = index++;
var lastRow = tbl.rows.length;
var row = tbl.insertRow(lastRow);
row.align = "center";
// index cell
var tdIndex = document.createElement("td");
var elIndex = document.createTextNode(i);
tdIndex.appendChild(elIndex);
row.appendChild(tdIndex);
//color cell
var tdHR = document.createElement("td");
var elHR = document.createElement("hr");
tdHR.appendChild(elHR);
row.appendChild(tdHR);
// expression cell
var tdExp = document.createElement("td");
var elExp = document.createElement("input");
elExp.type = "text";
elExp.name = "txtExp" + i;
elExp.id = "txtExp" + i;
tdExp.appendChild(elExp);
row.appendChild(tdExp);
// place cell
var tdPlace = document.createElement("td");
var elLeft;
var elRight;
if (navigator.appName.indexOf("Explorer") > -1) {
var placeName = "place" + i;
elLeft = document.createElement("<input name=" + placeName + " checked=checked>");
elRight = document.createElement("<input name=" + placeName + ">");
}
else {
elLeft = document.createElement("input");
elLeft.checked = true;
elRight = document.createElement("input");
}
elLeft.type = "radio";
elLeft.name = "place" + i;
elLeft.value = "left";
elRight.type = "radio";
elRight.name = "place" + i;
elRight.value = "right";
tdPlace.appendChild(elLeft);
var elText = document.createTextNode("/");
tdPlace.appendChild(elText);
tdPlace.appendChild(elRight);
row.appendChild(tdPlace);
//delete cell
var tdDelete = document.createElement("td");
var elDelete = document.createElement("input");
elDelete.type = "button";
elDelete.id = "btnDelete" + i;
elDelete.value = "Delete";
elDelete.onclick = function() {
tbl.deleteRow(this.parentNode.parentNode.rowIndex);
}
tdDelete.appendChild(elDelete);
row.appendChild(tdDelete);
}
function removeRow(index) {
tbl.deleteRow(index);
}
</script>
</head>
<body>
<input type="button" value="Add" onclick="insert();" />
<table id="tblSample">
<thead>
<tr>
<th width="40">序号</th>
<th width="40">颜色</th>
<th width="150">表达式</th>
<th width="50">左/右</th>
<th width="60"></th>
</tr>
</thead>
</table>
</body>
</html>
分享到：
相关推荐
1. **外部脚本引入**：`<script language="JavaScript" type="text/JavaScript" src="../zb/date.js"></script>` 这一行代码表明了从外部引入了一个名为`date.js`的JavaScript文件，该文件可能包含了与日期处理相关...
本文将详细解析从给定文件中提取的JavaScript键码表，帮助读者深入理解这些键码所代表的按键及其功能。 ### 键码表概览 键码表是JavaScript中用于识别键盘按键的一种方式，主要通过`event.keyCode`或更现代的`...
总的来说，“js 动态电子表”涉及HTML表格构建、JavaScript DOM操作、事件处理、数据绑定、异步通信、计算和可视化等多个方面，是前端开发中的一个重要实践。通过熟练掌握这些技能，开发者可以创建出功能丰富、交互...
在网页中实现一个“超好日历表”通常涉及到JavaScript的核心概念、DOM操作、事件处理以及可能的日期时间处理。下面我们将深入探讨这些知识点。 首先，JavaScript的核心概念包括变量、数据类型、控制结构（如条件...
JavaScript，也被称为JS，是一种广泛应用于网页和网络应用的脚本语言，主要在客户端运行，为用户提供动态交互体验。这份“JavaScript语法一览表”涵盖了语言的基础到进阶知识，是学习和参考JavaScript语法的重要资源...
除了Web SQL API，还可以使用像`sql.js`这样的库，它允许你在Node.js或浏览器中使用JavaScript操作SQLite数据库，无需依赖于特定的API。 为了验证数据是否正确存储，你可以使用SQLiteStudio等工具，将JavaScript...
在JavaScript（JS）中，对HTML表格进行操作是常见的需求，包括添加新的行或删除现有的行。这在网页动态交互中非常有用，比如用户输入数据的管理或者展示数据的增删改查功能。以下我们将详细讲解如何使用JavaScript来...
在IT行业中，JavaScript（简称JS）通常用于网页前端交互，但通过特定的库和API，我们也能使用JS来操作Microsoft Word文档，包括在Word中创建和编辑表格。本篇文章将详细探讨如何使用JS来实现这一功能，以及相关的...
JavaScript，简称JS，是Web开发中的重要脚本语言，用于实现客户端的动态效果和交互。在编程过程中，理解和处理JS错误至关重要，因为它们可以帮助我们识别并修复代码中的问题。以下是一些关于JS技巧和错误对照表的...
在提供的压缩包文件"锁定表头表列"中，很可能包含了一个简单的示例项目，可能包括HTML文件（用于构建表格结构）、CSS文件（用于样式设计）和JavaScript文件（用于实现滚动监听和元素操作）。通过学习这个示例，你...
【标题】"jsp+js日程表代码"所涉及的知识点主要集中在Web开发领域，特别是JavaScript、JavaServer Pages（JSP）以及HTML等技术的综合应用。以下是对这些技术及其在日程表功能实现中的作用的详细解释： 1. ...
JavaScript可以利用DOM操作动态创建这样的表格，通过遍历数据源，为每一行和每一列添加相应的元素。同时，可以使用CSS进行样式定制，例如边框、背景色、字体等，以提升视觉效果。 2. **左侧有表头的表格** 左侧有...
在JavaScript中，我们可以通过模拟实现哈希表来优化数据处理效率，尤其是在处理大量数据时。以下是对JS模拟实现哈希表及其应用的详细说明。 首先，了解一些与哈希表相关的基础知识点： 1. **属性的枚举**：在...
在本项目中，"JS手机端课程表及课程安排事项代码"是一个专为在校学生设计的应用，它利用JavaScript技术在手机端实现了一种便捷的课程表管理功能。这个应用程序允许用户根据自己的学习计划轻松定制和查看课程表，提高...
在JavaScript编程中，生成99乘法表是一种常见的练习，它可以增强我们对循环、字符串操作以及数组的理解。这个"JS自动生成99乘法表代码"项目，通过输入序列，可以动态地创建并显示乘法表格，同时也支持停止生成，为...
4. **DOM操作**：使用JavaScript操作DOM（Document Object Model）是改变网页内容的关键。你需要学会如何选择、添加或修改HTML元素，以便在页面上显示图表。 5. **绘图库**：为了简化图形绘制，通常会使用现有的...
在JavaScript（JS）中...总结来说，JavaScript操作Web页面导出为Excel主要涉及CSV格式化、HTML表格转换、第三方库的使用以及浏览器兼容性处理。通过理解这些概念和示例代码，你可以根据实际需求构建自己的导出功能。
5. 渲染：使用JavaScript操作DOM，动态创建和更新省份与城市的选项。这可能涉及到`innerHTML`属性的修改，或者使用更现代的API如`createDocumentFragment`和`appendChild`。 6. 验证：在提交表单前，脚本可以检查...
要使XSLT能够调用JavaScript，除了XSLT处理器（如Xalan）之外，还需要在CLASSPATH中包含js.jar文件，这是JavaScript的实现，以及bsf.jar文件，这是Xalan发行版的一部分。这些文件提供了必要的运行环境和接口，以便...
这个简单的例子展示了如何使用JavaScript操作SQLite数据库的基本步骤。实际开发中，你可能需要处理更复杂的查询、事务管理和错误处理。了解JavaScript与SQLite的交互方式对于前端和移动开发者来说非常有价值，它可以...