<!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动态添加表格行，可以创建一个函数，接收数据作为参数，然后在tbody中插入新的`<tr>`元素： ```javascript function addTableRow(data) { var newRow = $("<tr>"); for (var key in data) { newRow....
首先，让我们讨论如何使用jQuery添加新行到表格。在HTML中，表格由`<table>`标签定义，行由`<tr>`标签表示，而单元格则由`<td>`标签定义。通过jQuery，可以动态创建这些元素并将其插入到表格中。以下是一个简单的...
主要介绍了jQuery+ajax实现动态添加表格tr td功能,结合实例形式分析了jQuery基于ajax动态创建页面table元素相关操作技巧,需要的朋友可以参考下
要动态添加表格行，我们通常会在用户触发某个事件（如点击按钮）时执行相关操作。以下是一个基本的示例： ```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 如何...
主要介绍了JQuery动态添加和删除表格行的方法,实例分析了jQuery中动态操作表格行的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本教程将深入探讨如何使用jQuery实现动态更改table表格数据，让你的网页表格具有实时编辑功能，提升用户体验。 首先，我们需要理解HTML表格的基本结构。一个基本的表格由`<table>`元素开始，包含若干个`<tr>`（行）...
在实际项目中，动态添加控件常用于响应用户操作，如添加表格行、表单字段等。例如，当用户点击“添加”按钮时，可以创建一个新的输入框： ```javascript $('button.add').click(function() { var newRow = $('<tr>...
主要介绍了jQuery实现动态添加、删除按钮及input输入框的方法,涉及jQuery事件响应及页面元素动态操作相关实现技巧,需要的朋友可以参考下