jQuery动态生成表格及右键菜单功能示例
本文实例讲述了jQuery动态生成表格及右键菜单功能。分享给大家供大家参考，具体如下：
这里用的是 jquery 1.4.1 的库文件，具体代码如下：
<!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>
<title>无标题页</title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
var id = 0;
function addInfo() {
var cpu = document.getElementById("txtCpu");
var zhuban = document.getElementById("txtZhuban");
var neicun = document.getElementById("txtNeicun");
var yingpan = document.getElementById("txtYingpan");
var tb = document.getElementById("tbAdd");
//alert("数据插入成功！");
var tr = tb.insertRow();
var td0 = tr.insertCell();
td0.innerHTML = id;
var td1 = tr.insertCell();
td1.innerHTML = cpu.value;
var td2 = tr.insertCell();
td2.innerHTML = zhuban.value;
var td3 = tr.insertCell();
td3.innerHTML = neicun.value;
var td4 = tr.insertCell();
td4.innerHTML = yingpan.value;
id++;
$("#tbAdd").append(tr);
}
$(function () {
var clickedTrIndex = -1;
$("#addForm>input[type=button]")
.live("click", function () {
$("#tbAdd tr:has(td):even").css("background", "#ebebeb");
});
//绑定鼠标移入移出事件到表格的行
$("#tbAdd tr:has(td)")
.live("mouseover", function () {
$(this).css("cursor", "pointer").css("background", "#bcc7d8");
})
.live("mouseleave", function () {
var trIndex = $(this).index();
if (trIndex % 2 == 0) {
$(this).css("background", "#ebebeb");
}
else {
$(this).css("background", "");
}
})
.live("mousedown", function (event) {
if (event.button == 2) {
x = event.clientX;
y = event.clientY;
$("#contextMenu").css("display", "block").css("left", x).css("top", y);
clickedTrIndex = $(this).index();
}
});
$("#contextMenu")
.mouseover(function () {
$(this).css("cursor", "pointer");
});
$("body")
.live("mouseup", function (event) {
if (event.button == 0) {
$("#contextMenu").css("display", "none");
}
});
$("#contextMenu li")
.mouseover(function () {
$(this).css("background", "#C1D7EE");
})
.mouseout(function () {
$(this).css("background", "");
})
.click(function () {
var deleteStr = $(this).children("a").attr("title");
if (deleteStr == "delete") {
$("#tbAdd tr:has(td):eq(" + clickedTrIndex + ")").remove();
}
else {
alert("按下了：" + deleteStr);
}
});
});
</script>
<style type="text/css">
#tbAdd{
}
#tbAdd tr td{ height:30px;
text-align:center;
}
#tbAdd thead tr th{ width:90px;
height:30px;
text-align:center;
}
#addForm input[type=text]{ margin-bottom:8px;
width:150px;
}
#contextMenu{ width:150px;
padding:5px 0px 5px 5px;
line-height:24px;
background-color:#F0F0F0;
position:absolute;
display:none;
}
#contextMenu ul{ margin:0px;
}
#contextMenu li{ margin:0px;
margin-left:-15px;
float:left;
width:100%;
list-style-type:none;
}
#contextMenu li a{ text-decoration:none;
padding:5px 0px 5px 12px;
display:block;
color:#282828;
}
</style>
</head>
<body onContextmenu="return false;">
<div>
<table id="tbAdd" cellpadding="0" cellspacing="0" border="1" style="border-collapse:collapse;">
<thead>
<tr>
<th>编号</th><th>CPU</th><th>主板</th><th>内存</th><th>硬盘</th>
</tr>
</thead>
</table>
<br />
<div id="addForm">
<span>CPU：</span><input type="text" id="txtCpu" /><br />
<span>主板：</span><input type="text" id="txtZhuban" /><br />
<span>内存：</span><input type="text" id="txtNeicun" /><br />
<span>硬盘：</span><input type="text" id="txtYingpan" /><br />
<input type="button" value="添加信息" onclick="addInfo()" /><br />
</div>
<div id="contextMenu">
<ul>
<li><a href="#" title="add">添加信息</a></li>
<li><a href="#" title="delete">删除信息</a></li>
<li><a href="#" title="modify">修改信息</a></li>
<li><a href="#" title="save">保存信息</a></li>
</ul>
</div>
</div>
</body>
</html>
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery表格(table)操作技巧汇总》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关推荐
-
jQuery动态生成Bootstrap表格
效果图如下所示: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+req
-
JQuery Ajax动态生成Table表格
前言: 本示例大概功能是前台通过JQuery的Ajax调用一般处理程序(Handler),获取表格需要显示的信息,然后转换成json格式返回给前台,前台获取到数据后循环构建表格的行,最好把行附加到表里. 目标: a 熟悉简单JQuery Ajax的使用 b 了解如何构造基本的Json格式的数据(构建Json也可以通过第三方的dll) c 熟悉下handler的基本用法 1 简单效果图 2 前台代码 <%@ Page Language="C#" AutoEventWireup=&q
-
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
jQuery轻松实现表格的隔行变色和点击行变色的实例代码 <!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> <m
-
jQuery动态生成不规则表格(前后端)
一.需求:有这么一张表 前四个属性当作联合主键 需要把该表所有的行在前端以表格形式显示出来,要求activityId相同时合并成一行,activityCode相同时,合并一行,activityVersion相同时也合并一行.类似这种: 二.初解决:先上来把数据库的数据查询出来,以List<Activity> activities保存,再存到json对象中传回页面.像这样json.put("activities",activities); 到js页面了,然后就开始蒙蔽了.本来
-
JQuery 动态生成Table表格实例代码
JQuery动态生成Table表格 主要用到了JQuery中的append和appendto的方法,具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type&quo
-
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
本文实例讲述了jQuery实现表格隔行及滑动,点击时变色的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&qu
-
jquery实现表格中点击相应行变色功能效果【实例代码】
对于一个表格,为了使我们选中的项更容易区分,需要为选中项添加高亮,同时也需要,将其他项的高亮形式去除.类似于: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <link href=&
-
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
本文实例讲述了jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果的方法.分享给大家供大家参考,具体如下: 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htm
-
jQuery实现动态生成表格并为行绑定单击变色动作的方法
本文实例讲述了jQuery实现动态生成表格并为行绑定单击变色动作的方法.分享给大家供大家参考,具体如下: <html> <head> <meta charset="utf-8"> <title>jquery表格单击变色</title> <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
-
jQuery代码实现表格中点击相应行变色功能
对于一个表格,为了使我们选中的项更容易区分,需要为选中项添加高亮,同时也需要,将其他项的高亮形式去除.类似于: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <link href=&
-
Jquery 动态生成表格示例代码
复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"
-
用JQuery实现表格隔行变色和突出显示当前行的代码
复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> &l
-
jQuery实现多按钮单击变色
这个小特效代码很简单,就不多做说明了,直接奉上源码. JQuery代码: 复制代码 代码如下: <script type="text/javascript"> //加载事件 $(function () { var collection = $(".flag"); $.each(collection, function () { $(this).