JS动态增删表格行
2010-06-07 10:46
<!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>动态增删表格行</title>
<script language="JavaScript">
<!--
var rowIndex=0;
function addLine(obj){
var objSourceRow=obj.parentNode.parentNode;
var objTable=obj.parentNode.parentNode.parentNode.parentNode;
if(obj.value=='增加'){
rowIndex++;
var objRow=objTable.insertRow(rowIndex);
var objCell;
objCell=objRow.insertCell(0);
objCell.innerHTML=objSourceRow.cells[0].innerHTML;
objCell=objRow.insertCell(1);
objCell.innerHTML=objSourceRow.cells[1].innerHTML;
objCell=objRow.insertCell(2);
objCell.innerHTML=objSourceRow.cells[2].innerHTML.replace(/增加/,'删除');
}
else{
objTable.lastChild.removeChild(objSourceRow);
rowIndex--;
}
}
function removeLine(){
}
//-->
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body bgcolor="#ffffff">
<form name="form1" method="post">
<table width="400" border="1">
<tr>
<td>基本信息</td>
<td><select name="select[]">
<option value="" selected>选择</option>
<option value="1">第一</option>
<option value="2">第二</option>
</select></td>
<td><input name="basicinfo" type="text[]" id="basicinfo">
<input name="add" type="button" id="add" value="增加" onClick="addLine(this)"></td>
</tr>
</table><input type="submit" name="submit" value="submit">
</form>
</body>
</html>
分享到：
相关推荐
javascript动态增删表格行
js 动态按行增删表格，删除使用复选框选中删除
动态增删表格行的纯JavaScript实现并不复杂，关键在于理解DOM操作和事件处理。通过创建和操作HTML元素，结合数据模型，我们可以轻松实现这一功能。在实际项目中，根据需求，可能还需要考虑数据的持久化、表单验证、...
本话题主要探讨如何利用原生JavaScript和DOM来实现数据表格中的动态增删查改功能，这对于前端开发来说是一项基本且重要的技能。 1. **创建数据表格** - 使用`<table>`元素创建表格结构，包括`<thead>`定义表头，`...
总而言之，JavaScript动态增删表格行是网页开发中的一个常见需求。通过上述介绍和实例演示，我们可以利用JS提供的DOM操作方法，来灵活地对表格进行行的添加和删除操作。同时，通过了解其他相关主题的内容，我们可以...
总结来说，动态增删表格行的JS代码分析涉及到HTML表格结构、JavaScript DOM操作以及事件监听。理解这些基本概念和方法，可以帮助开发者创建更加灵活和交互性强的网页应用。在实际项目中，可以在此基础上进行扩展，如...
本文将深入探讨如何使用这两者来实现表格的动态增删改查以及表单验证，这对于前端开发人员来说是必备技能。 首先，HTML（HyperText Markup Language）是网页内容的基础结构，而JavaScript则负责赋予这些内容动态...
在这个场景下，“动态增删行插件”是一个专门为网页添加动态行功能的组件，它可以轻松集成到现有的网页应用中，无需开发者进行大量的定制编码。 动态增删行功能的实现涉及到JavaScript、HTML和CSS等前端技术。...
使用JavaScript，我们可以动态地生成和更新表格行 (`<tr>`)、单元格 (`<td>`) 或表头 (`<th>`), 以及与之相关的样式和事件。例如，我们可以通过 `document.createElement()` 创建新元素，再通过 `innerHTML` 或 `...
"js实现对表格的增删查改"这个主题，就是关于如何利用JavaScript来管理HTML表格中的数据，提供用户友好的数据操作功能。 首先，我们来理解HTML表格的基本结构。一个HTML表格由`<table>`标签开始，`<tr>`标签定义每...
javaScript实现动态增删插入表格
对于"动态增删表格"，我们可以创建一个基础表格结构，然后利用jQuery动态生成或移除表格行（tr）。例如，当用户点击添加按钮时，我们可以创建一个新的tr元素，包含预定义的列结构，然后用.append()将其插入到表格中...
在本主题中，我们将深入探讨如何使用纯JavaScript来实现表格（table）的行增删功能，这对于创建数据管理界面或者用户输入表单的网页特别有用。 首先，我们需要了解HTML中的`<table>`元素。`<table>`是用于展示结构...
综上所述，这个项目展示了如何利用 Vue.js 和 Element UI 创建一个功能丰富的动态表格应用，包括单元格合并、表格编辑、动态增删行等功能。开发者可以参考这个项目学习 Vue 的数据绑定、组件化以及 Element UI 的...
在给定的代码示例中，我们看到了一个利用JavaScript控制HTML表格增删行的实例，这在处理需要用户动态输入多条记录的场景时非常实用。 ### 标题解析：“javascript控制增删行” 这个标题简洁明了地指出了本文的核心...
总的来说，"html+css+js表格动态增删改与xml加载与保存"这个项目涵盖了网页开发中的基本技能，包括动态HTML操作、CSS美化、JavaScript事件处理和XML数据交互。掌握这些技术，能够帮助开发者构建具有强大功能和良好...
### 自动增加删除表格行代码（纯JS） 在网页开发中，动态地操作HTML元素是一项常见且实用的功能。本文将详细介绍如何使用纯JavaScript实现表格行的自动增加与删除功能，以及如何为表格中的特定单元格添加当前日期。...
在这个"layuiDemo增删改查动态增删组件带后台脚本完整演示.zip"压缩包中，我们可以看到一个使用layui实现的典型应用场景：数据的增删改查（CRUD）功能。 首先，"layuiDemo"是基于layui框架的一个示例项目，展示了...