<!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>动态操作表格</title>
<script type="text/javascript" src="table/jquery.js"
language="javascript"></script>
<script type="text/javascript">
var count=0;
function add(){
var name=$("#name").val();
var card=$("#card").val();
var sex=$("#sex").val();
//判断只能添加二十个
if(count==20){
alert("不能再加了");
}else{
count++;
//追加
$("table").append("<tr id="+count+"><td>"+name+"</td>"+
"<td>"+card+"</td>"+"<td>"+sex+"</td>"+"<td>
<a href='javascript:del ("+count+")'>删除</a></td></tr>");
}
}
//删除
function del(row){
count--;
$("#"+row).remove();
}
</script>
<style type="text/css">
table {
border: 1px solid #00C;
border-collapse: collapse;
width: 600px;
text-align: center;
}
table tr td {
border: 1px solid #00C;
border-collapse: collapse;
width: 600px;
}
</style>
</head>
<body>
名字
<input type="text" id="name" /> 学号
<input type="text" id="card" /> 性别
<input type="text" id="sex" />
<input type="button" onclick="add()" value="添加" />
<p></p>
<table>
<tr>
<th>姓名</th>
<th>学号</th>
<th>性别</th>
<th>操作</th>
</tr>
</table>
</body>
</html>
分享到：
相关推荐
在这个"jQuery表格添加行数据代码"中，我们主要关注的是如何利用jQuery来动态地向表格中添加、编辑和删除行数据。这个压缩包包含了一些关键文件，如CSS样式文件、HTML页面、JavaScript脚本以及说明文件。 首先，`...
### jQuery+ajax实现动态添加表格tr td功能 在进行Web开发时，我们经常需要动态地从服务器获取数据，并将这些数据展示在网页上。表格是展示这些数据的一种常见形式。本文将详细解析使用jQuery和ajax技术来实现动态...
使用jQuery动态添加表格行，可以创建一个函数，接收数据作为参数，然后在tbody中插入新的`<tr>`元素： ```javascript function addTableRow(data) { var newRow = $("<tr>"); for (var key in data) { newRow....
首先，让我们讨论如何使用jQuery添加新行到表格。在HTML中，表格由`<table>`标签定义，行由`<tr>`标签表示，而单元格则由`<td>`标签定义。通过jQuery，可以动态创建这些元素并将其插入到表格中。以下是一个简单的...
要动态添加表格行，我们通常会在用户触发某个事件（如点击按钮）时执行相关操作。以下是一个基本的示例： ```html 添加行 初始数据 ``` ```javascript $(document).ready(function() { var rowNum = 1; ...
"jQuery动态创建表格生成器代码"的核心在于，它提供了一个无需手动编写HTML代码的便捷方式，可以轻松地添加行（row）和列（column）。这通常涉及到以下几个关键步骤： 1. **初始化表格结构**：在网页中创建一个基本...
本示例“jquery表格动态添加删除行代码”利用jQuery的强大功能，为用户提供了一个直观且用户友好的表格管理体验。这个代码实现了一个功能，即在表格中动态地添加和删除行，这对于数据展示和编辑是非常实用的。 首先...
动态添加和删除行通常涉及向现有表格动态插入或移除这些元素。 1. **动态添加行**： - 使用jQuery，可以获取表格引用，例如`$("#myTable")`，其中`#myTable`是表格的ID。 - 创建新的`<tr>`元素，可以使用`$('<tr>...
raydreams.js是一款基于Bootstrap的jquery动态数据表格插件。该jquery动态数据表格的特点是使用简单，它能通过json动态加载表格所需的数据，并通过配置参数设置表格列是否排序和添加功能按钮等。
要使用jQuery动态添加表格行，可以编写一个函数，根据需要插入新的行数据。以下是一个简单的示例： ```javascript function addRow(name, age) { var newRow = $("<tr><td>" + name + "</td><td>" + age + "</td>...
JQuery 可拖曳动态添加表格、动态排序 JQuery 是一个流行的 JavaScript 库，提供了丰富的功能来简化 Web 开发。今天，我们将探讨如何使用 JQuery 实现可拖曳动态添加表格、动态排序的功能。 可拖曳动 可拖曳动是 ...
本文将深入探讨如何使用jQuery创建动态表格，这是一个常见的需求，特别是在数据展示和用户交互丰富的Web应用中。 首先，让我们理解动态表格的基本概念。动态表格指的是在网页加载后或用户操作时根据需要生成或更新...
在网页开发中，数据展示是不...通过以上步骤，你就可以使用jQuery和Java实现一个基本的表格动态分页功能。但需要注意，实际项目中可能还需要考虑错误处理、性能优化、安全问题等多个方面，确保系统的稳定性和用户体验。
在这个场景中，我们关注的是如何使用 jQuery 动态创建表格，并且为表格的每个单元格赋予随机背景颜色。这通常用于增强用户界面的视觉吸引力，或者在数据展示时提供更直观的区分。 首先，我们需要理解 jQuery 如何...
1. 动态添加表格行的基本思路 在进行动态添加行操作时，我们通常先准备一个表格行的模板。这个模板是一个隐藏的元素，它具有所需的所有单元格元素，以及必要的数据或占位符。我们使用JQuery克隆这个模板，并将其插入...
在介绍jQuery动态添加删除表格行（tr）和单元格（td）的过程中，首先需要明确的是jQuery库是JavaScript的一个快速、小巧、功能丰富的库，它简化了HTML文档遍历和操作、事件处理、动画和Ajax交互，对于Web开发人员来...
通过本篇文章，我们将学习如何使用jQuery实现动态添加和删除按钮及input输入框的方法，同时还将涉及到事件响应和页面元素动态操作的相关技巧。 首先，我们需要注意的是，当页面加载完毕后，jQuery的$(document)....
在本场景中，我们探讨的是如何利用jQuery实现表格数据的动态添加与统计。主要涉及的技术点包括jQuery的选择器、事件处理、DOM操作以及动态克隆。 首先，jQuery的`clone(true)`函数是关键所在。这个函数用于复制一个...