刚了解了Table、TableRow、TableCell对象，试着用他们写个自己的例子。给Table添加删除行。
<html>
<head>
<script type="text/javascript">
function insRow()
{
var rowList = document.getElementById("myTable").rows.length;
var x=document.getElementById('myTable').insertRow(rowList);
var y=x.insertCell(0);
var z=x.insertCell(1);
var z2=x.insertCell(2);
y.innerHTML=document.getElementById("name").value;
var sexVal = document.getElementsByName("sex");
for(var i=0;i<sexVal.length;i++){
if(sexVal[i].checked){
z.innerHTML=sexVal[i].value;
sexVal[i].checked=false;
}
}
z2.innerHTML="<input type='button' value='删除' onclick='deleteRow(this)'>";
document.getElementById("name").value="";
}
function deleteRow(c){
var index = c.parentNode.parentNode.rowIndex;
document.getElementById("myTable").deleteRow(index);
}
</script>
</head>
<body>
姓名：<input type="text" id="name" /><br />
性别：<input type="radio" name="sex" value="男"/>男<input type="radio" name="sex" value="女" />女<br />
<input type="button" onclick="insRow()" value="添加">
<br />
<table id="myTable" border="1">
<tr>
<td>AAA</td>
<td>男</td>
<td><input type="button" value="删除" onclick="deleteRow(this)"></td>
</tr>
<tr>
<td>BBB</td>
<td>女</td>
<td><input type="button" value="删除" onclick="deleteRow(this)"></td>
</tr>
<tr>
<td>CCC</td>
<td>男</td>
<td><input type="button" value="删除" onclick="deleteRow(this)"></td>
</tr>
</table>
</body>
</html>
相关推荐
js table添加、删除行。点“添加”按钮可以添加一行，每行后面都有一个删除按钮，可以删除所在行。
在本话题中，我们将深入探讨如何使用JavaScript来添加和删除HTML表格（table）中的行。这对于构建数据展示或者管理界面非常实用。 首先，让我们了解HTML表格的基本结构。一个简单的HTML表格由`<table>`标签定义，每...
在`jstable添加行删除行复制行.html`这个示例文件中，可以看到这些概念是如何具体实现的。通过阅读和理解代码，你可以更深入地学习如何利用JavaScript实现表格的动态管理。同时，也可以结合CSS和jQuery等库来增强...
在JavaScript中，表格（Table）是网页数据展示的常用元素，而动态地增加或删除行则是常见的交互需求。本文将深入探讨如何巧妙地利用JavaScript来实现这个功能。 首先，我们需要了解HTML中的`<table>`元素及其相关...
HTML TABLE批量添加行与删除行.javascript实现。
这篇文章主要介绍了如何使用jQuery在指定的HTML表格（table）中动态地添加和删除行。jQuery是一种广泛使用的JavaScript库，它简化了DOM操作，包括在表格中动态修改内容。 首先，我们要理解HTML表格的基本结构，一个...
这篇教程将专注于如何使用JavaScript动态地添加、删除Table的行，并实现排序功能，包括删除整行和整列。以下是对这些概念的详细解释： 1. **动态添加Table行：** 要动态添加行，我们可以使用`document....
javascript添加删除table行
本文将深入探讨如何使用JavaScript来动态地增加和删除表格（Table）的行。 首先，我们需要了解HTML表格的基本结构。一个基本的表格由`<table>`元素、`<tr>`（表格行）元素、`<td>`（表格数据单元格）元素组成。如果...
在JavaScript中，对HTML表格（`<table>`元素）进行添加和删除行的操作是常见的前端开发任务，尤其在动态展示数据或用户交互场景下。这篇博文主要探讨如何使用JavaScript实现这些功能。 首先，我们需要理解HTML表格...
使用javascript实现table动态增加删除行列。
在JavaScript编程中，动态添加和删除表格行是一个常见的需求，特别是在网页交互和数据展示中。这个例子主要展示了如何使用JS实现这一功能。首先，我们来理解这个“动态添加table行的js例子”的核心知识点。 1. **...
在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作，包括动态地添加和删除表格行。本文将深入探讨如何使用jQuery实现这一功能，以提高网页交互性。 一、HTML基础 首先，我们需要一个基本...
4. **事件绑定**：对于删除行功能，通常我们会将删除操作绑定到行的右键菜单或行的特定图标上，这需要使用`addEventListener`为每个行添加事件监听器。 这样，我们就实现了基本的`HTML`表格动态添加和删除行的功能...
首先，让我们详细了解一下如何使用jQuery添加和删除表格行。在HTML中，表格由`<table>`标签定义，行由`<tr>`标签表示，而单元格则由`<td>`或`<th>`（表头单元格）标签构成。在jQuery中，可以使用`.append()`方法向...
### JS动态添加删除行知识点详解 #### 一、概述 在网页开发中，经常会遇到需要动态操作表格元素的情况，比如动态地添加或删除表格行。本文将基于给定的脚本代码来详细介绍如何使用JavaScript（简称JS）实现动态...
本文将深入探讨`jstable`库中的“行添加”和“行删除”功能，以及如何在实际项目中运用这些功能。 ### jstable简介 `jstable` 是一个轻量级的JavaScript插件，专门用于创建具有Ajax支持的数据表格。它允许用户以...
本文将详细介绍如何使用 jQuery 实现表格的添加、删除行与列的操作。 ### 1. 添加行 添加行通常涉及到在 `<tbody>` 标签内插入新的 `<tr>` 元素。可以使用 jQuery 的 `append()` 方法来完成： ```javascript // ...
在JavaScript中，动态地添加或删除表格数据行是常见的需求，尤其在开发交互式Web应用时。本篇文章将深入探讨如何实现这些功能，并提供相关的源码示例。 首先，我们来了解一下HTML表格的基本结构。一个表格由`<table...
本文将详细介绍如何为Xcode 9.1添加删除当前行、复制当前行以及上下移动行的快捷键。 #### 准备工作 在进行任何操作前，请确保已经安装了Xcode 9.1版本，并且熟悉基本的终端操作。此外，建议备份...