js 动态增加、删除表格
代码：
<html>
<head>
<title>js动态增加、删除表格</title>
</head>
<body>
<form method="post" action="">
<input type="button" value="添加" onclick="addMyRow();"><input type="button" value="删除所有" onclick="delAllMyRow();">
<table border="1" style="width:75%;border:1px;">
<thead>
<tr bgcolor="#c8b4cd">
<td align="center">
序号
</td>
<td align="center">
姓名
</td>
<td align="center">
性别
</td>
<td align="center">
爱好
</td>
<td align="center">
籍贯
</td>
<td align="center">
操作
</td>
</tr>
</thead>
<tbody id="mybody">
<!----动态表格内容----->
</tbody>
</table>
</form>
</body>
</html>
<script type="text/javascript">
//全局变量
var i=0;
//添加行
function addMyRow(){
var mytable = document.getElementById("mybody");
var mytr = mytable.insertRow(); //插入行
//插入行单元格的值
mytr.insertCell(0).innerHTML = i+1;
mytr.insertCell(1).innerHTML="<input type='hidden' name='"+i+"'/><input type='text' name='myname"+i+"'/>";
mytr.insertCell(2).innerHTML="<input type='radio' name='mysex"+i+"' value='1'/>男<input type='radio' name='mysex"+i+"' value='2'/>女";
mytr.insertCell(3).innerHTML="<input type='checkbox' name='mylove"+i+"' value='1'/>上网<input type='checkbox' name='mylove"+i+"' value='2'/>篮球<input type='checkbox' name='mylove"+i+"' value='3'/>游泳";
mytr.insertCell(4).innerHTML="<select name='myjg"+i+"'><option value='1'>北京</option><option value='2'>河北</option><option value='3'>天津</option></select>";
mytr.insertCell(5).innerHTML="<input type='button' value='删除' onclick='delMyRow(this);'/>";
i++;
}
//删除当前行
function delMyRow(r){
var i=r.parentNode.parentNode.rowIndex; //当前行
var mytable = document.getElementById('mybody'); //获取table对象
mytable.deleteRow(i-1);
}
//删除所有行
function delAllMyRow(){
var mytable = document.getElementById("mybody");
var rowlen=mytable.rows.length;
for(var i=rowlen-1;i>=0;i--){
mytable.deleteRow(i);
}
}
</script>
相关推荐
本文将深入探讨如何使用JavaScript动态地增加和删除表格行。 首先，我们来了解一下HTML表格的基本结构。一个表格由`<table>`元素包含，其中包含`<tr>`（表格行）元素，每行内可以有多个`<td>`（表格数据单元格）或`...
js增加动态表格，点击增加就增加一行，点击删除就删除一行，每行前面有勾选框，可以勾选，删除多行
本实例将深入探讨如何利用jQuery实现动态增加和删除表格行的功能，这对于创建数据表或者交互式表单来说非常实用。 首先，我们需要一个基本的HTML结构来展示表格。表格通常由`<table>`元素定义，每一行由`<tr>`元素...
js实现动态增加和删除表格的行和列。实例 js实现动态增加和删除表格的行和列。实例
这个"vue.js动态表格增加删除修改代码.zip"文件显然包含了使用Vue.js实现动态表格功能的示例代码。动态表格是网页应用中常见的一种数据展示方式，它允许用户交互地添加、删除和修改数据。 首先，`index.html`文件是...
用JavaScript制作的动态表格，有添加、删除、全选、全不选，有对动态新增的域校验问题，有对新增的域设置readonly问题，还有对新增域中的span进行隐藏问题都有解决，还有对动态表格的讲解PPT一份。
在本主题中，我们将深入探讨如何使用纯JavaScript来实现表格（table）的行增删功能，这对于创建数据管理界面或者用户输入表单的网页特别有用。 首先，我们需要了解HTML中的`<table>`元素。`<table>`是用于展示结构...
本篇文章将详细探讨几种经典的jQuery动态增加删除表格的实例，同时也将涵盖一种使用原生JavaScript实现的方法。 首先，jQuery动态增加表格行通常涉及以下几个步骤： 1. **创建HTML结构**：一个基本的表格由`...
总的来说，JavaScript动态操作表格涉及创建、删除、选择和更新表格元素，这些都需要对DOM有深入理解。在实际应用中，还要考虑浏览器兼容性，特别是对于较旧的浏览器，如IE6和早期的Firefox版本。通过合理使用...
javascript动态增加、删除、填充表格内容 unction numberCells() { var count=0; for (i=0; i ; i++) { for (j=0; j (i).cells.length; j++) { document.all.mytable.rows(i).cells(j)....
在JavaScript编程中，动态表格是一种常见的交互式网页元素，它允许用户在运行时添加、删除、检查和修改数据。这种功能对于数据展示和管理尤为重要，特别是在Web应用中处理大量结构化信息时。以下是对"js 动态表格 增...
### JavaScript 实现动态增加删除表格行（兼容IE/FF） #### 概述 本文将详细介绍如何使用JavaScript来实现在Web页面上动态增加和删除表格行的功能，并确保该功能在Internet Explorer (IE) 和 Firefox (FF) 等...
动态增加删除行 数据1 数据2 <td><button onclick="deleteRow(this)">删除</button></td> ()">增加行 <script src="script.js"> ``` 在上面的HTML中，我们有一个初始的表格行，每个单元格包含...
在JavaScript（JS）中，创建一个可编辑的表格并实现动态添加和删除行的功能是一项常见的需求，尤其是在构建数据管理界面时。以下将详细介绍如何利用原生JavaScript实现这一功能。 首先，我们需要在HTML中创建一个...
本话题主要探讨如何利用原生JavaScript和DOM来实现数据表格中的动态增删查改功能，这对于前端开发来说是一项基本且重要的技能。 1. **创建数据表格** - 使用`<table>`元素创建表格结构，包括`<thead>`定义表头，`...
这篇博文"表格行记录动态增加和删除"主要探讨了如何在网页应用中实现这一功能，这通常是通过JavaScript、jQuery或者更现代的前端框架如Vue.js、React.js来完成的。下面将详细讲解这一知识点。 首先，我们要理解表格...
在本文中，我们将深入探讨如何使用JavaScript来实现HTML表格的增加和删除功能。 首先，HTML表格是由`<table>`、`<tr>`（行）、`<th>`（表头）和`<td>`（单元格）等标签构成的。通过JavaScript，我们可以对这些元素...
这篇博客"JS对表格的动态增加删除行 (多个demo)"提供了实用的方法来帮助开发者实现这些功能。以下是对这个主题的详细说明： 1. **HTML表格基础**： HTML表格由`<table>`元素定义，行`<tr>`，列`<td>`（或`<th>`...
使用javascript实现table动态增加删除行列。