table增、删、获取值
1.js实现，缺点getElementsByClassName兼容性问题，IE8以下不支持。
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>jquery</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 导入 jquery 库 -->
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
//增加
function add(){
var tab = document.getElementById("table1");
var tr = tab.insertRow(tab.rows.length);
var td1 = tr.insertCell(0);
td1.innerHTML = '<input class="xh" type="text"/>';
var td2 = tr.insertCell(1);
td2.innerHTML = '<input class="name" type="text"/>';
var td3 = tr.insertCell(2);
td3.innerHTML = '<input class="sex" type="text"/>';
var td4 = tr.insertCell(3);
td4.innerHTML = "<input type='button' value='删除' onclick='del("+(tab.rows.length-1)+")'/>";
}
//提交
function sub(){
var rows = document.getElementById("table1").rows.length;
for ( var i = 1; i < rows; i++) {
console.log(document.getElementById("table1").rows[i].cells[0].getElementsByClassName("xh")[0].value);
console.log(document.getElementById("table1").rows[i].cells[1].getElementsByClassName("name")[0].value);
console.log(document.getElementById("table1").rows[i].cells[2].getElementsByClassName("sex")[0].value);
}
}
//删除
function del(e){
var tab = document.getElementById("table1");
tab.deleteRow(e);
}
</script>
</head>
<body>
<table id="table1" border="1" cellpadding="10" cellspacing="0">
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td><input class="xh" type="text"/></td>
<td><input class="name" type="text"/></td>
<td><input class="sex" type="text"/></td>
<td><input type="button" value="增加" onclick="add()"/></td>
</tr>
</table>
<input type="button" value="提交" onclick="sub()"/>
</body>
</html>
2.jquery实现，无兼容性问题。
<!DOCTYPE html>
<html>
<head>
<title>jquery_02.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 导入 jquery 库 -->
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#table1").append(
"<tr>"+
"<td><input class='xh' type='text'/></td>"+
"<td><input class='name' type='text'/></td>"+
"<td><input class='sex' type='text'/></td>"+
"<td><input type='button' value='增加' onclick='add()'/></td>"+
"</tr>"
);
});
//增加
function add(){
var tab = document.getElementById("table1");
$("#table1").append(
"<tr>"+
"<td><input class='xh' type='text'/></td>"+
"<td><input class='name' type='text'/></td>"+
"<td><input class='sex' type='text'/></td>"+
"<td><input type='button' value='删除' onclick='del("+tab.rows.length+")'/></td>"+
"</tr>"
);
}
//删除
function del(e){
var tab = document.getElementById("table1");
tab.deleteRow(e);
}
//提交
function sub(){
var tab = document.getElementById("table1");
for(var i = 1; i < tab.rows.length; i++){
console.log($("table tr:eq("+i+")").children("td:eq(0)").find("input").val());
console.log($("table tr:eq("+i+")").children("td:eq(1)").find("input").val());
console.log($("table tr:eq("+i+")").children("td:eq(2)").find("input").val());
}
}
</script>
</head>
<body>
<table id="table1" border="1" cellpadding="10" cellspacing="0">
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
</table>
<input type="button" value="提交" onclick="sub()"/>
</body>
</html>
分享到：
相关推荐
当点击“添加”按钮时，脚本会获取用户输入的四个字段值（姓名、性别、年龄和籍贯），然后在表格末尾添加一行新数据。每一项数据都会被插入到对应的单元格中。同时，为了确保数据的有效性，在添加前会检查“姓名”...
在JavaScript中，HTML表格是网页数据展示和交互的常用元素，`<table>`标签用于创建表格，而通过JavaScript，我们可以动态地对表格进行增、删、改等操作，提高用户体验和交互性。以下是对这个主题的详细讲解： 一、...
Visual Studio（VS）作为一个强大的集成开发环境，提供了丰富的工具和技术支持来处理SQL Server数据库的增删改查操作。以下将详细介绍如何在VS中实现SQL数据库的增删改查功能。 首先，我们需要了解SQL Server数据库...
本项目“Android简单数据库操作增删改查项目实现”旨在介绍如何在Android应用中使用SQLite进行基本的数据操作，包括添加（Insert）、查询（Query）、更新（Update）和删除（Delete）。 1. 数据库初始化： 在...
**JFinal 增删查改样例详解** JFinal 是一个基于 Java 语言的轻量级 Web 开发框架，它的设计目标是让开发更简单、更快速。在这个"jfinal 增删查改样例"中，我们将深入探讨如何使用 JFinal 进行数据库操作，包括增...
在这个"asp页面的增删改查"主题中，我们将深入探讨如何在ASP中实现对SQL Server数据库的基本操作。 首先，让我们了解一下ASP页面的基本结构。一个典型的ASP页面通常包含HTML标记、服务器端脚本和可能的客户端脚本。...
本文将深入探讨“简单的数据库增删改查”这一主题，主要基于SQL语言和MySQL数据库管理系统。SQL（Structured Query Language）是用于管理和处理关系型数据库的标准编程语言，而MySQL则是一款广泛使用的开源、免费的...
本文将深入探讨如何使用这两者来实现表格的动态增删改查以及表单验证，这对于前端开发人员来说是必备技能。 首先，HTML（HyperText Markup Language）是网页内容的基础结构，而JavaScript则负责赋予这些内容动态...
2，Jquery 操作 Table 的数据，主要是增删改查不显示在每一条数据的后面； 3，对修改操作使用了jquery.cookie.js ，并做了cookie最大值的判断，防止无效（其实不判断最大值也关系不大）； 4，页面需要自己美化； 5，...
在Java编程中，连接SQL Server数据库进行数据的增删改查是常见的操作。这涉及到Java的JDBC（Java Database Connectivity）技术，它提供了一种标准的API，使得Java程序能够与各种类型的数据库进行交互。本篇文章将...
在Android开发中，"增删改查"（CRUD，Create, Read, Update, Delete）是基础且重要的功能，广泛应用于各种数据管理类的应用程序。这个小程序可能是一个基础的数据库操作示例，让我们来深入探讨Android中如何实现这些...
在 IT 领域，"表格增删改查"是常见的功能需求，用于管理数据库中的数据。EasyUI 提供了内置的支持，使得这一过程变得简单易行。 在这个“easyui 表格增删改查工具类”中，我们可以期待找到一些实用的代码示例和辅助...
本文将深入探讨如何使用JavaScript实现表格内容的增删功能，这对于网页交互性至关重要。 首先，我们要了解HTML表格的基本结构，它由`<table>`、`<tr>`（行）、`<td>`（单元格）等标签组成。在JavaScript中，我们...
**JSP网页连接数据库增删改查模板** 这个模板是一个基于Java Server Pages（JSP）技术的Web应用程序，主要用于演示如何通过网页实现对数据库中的数据进行添加、删除、修改和查询操作。它包括了一个预配置的数据库...
本教程将详细讲解如何在Android中使用SQLite进行数据库的创建、数据的增删查改以及数据绑定到UI上显示。 一、创建SQLite数据库 1. 创建`SQLiteOpenHelper`子类：这是Android提供的一类帮助我们管理SQLite数据库的...
"zendframework增删改查"这个主题主要涵盖了使用ZF进行数据操作的基础知识。 **1. 数据库连接与配置** 在 Zend Framework 中，我们通常使用`Zend_Db`组件来管理数据库连接。首先，需要在`application/configs/...
在VB（Visual Basic）编程中，增删改查（CRUD：Create, Read, Update, Delete）是最基础也是最重要的数据库操作。这些操作是任何数据库驱动应用程序的核心，无论是在Windows桌面应用还是网页应用中，都能看到它们的...
MySQL增删改查工具PHP类是一种实用的编程资源，它为开发者提供了便捷的方式来与MySQL数据库进行交互。在PHP中，数据库操作通常是通过预定义的函数或面向对象的接口来完成的，而这个类则封装了这些功能，使得数据库...
**增删改查操作** 在Android应用与SQLite交互时，CRUD（Create, Read, Update, Delete）操作是最基本的数据操作： 1. **创建(Create)**：使用`SQLiteOpenHelper`的`onCreate()`方法创建数据库和表。例如，通过`...
本教程主要关注的是如何使用Qt进行数据库的增删改查（CRUD）操作，尤其适合初学者入门。下面我们将深入探讨这个主题。 首先，Qt中的SQL模块提供了一个统一的接口，可以与多种数据库管理系统（如SQLite、MySQL、...