JQuery实现table行折叠效果以JSON做数据源

2024-10-18 06:19:16

代码如下:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
Array.prototype.filterRepeat = function () {
var res = [], hash = {};
for (var i = 0, elem; (elem = this[i]) != null; i++) {
if (!hash[elem]) {
res.push(elem);
hash[elem] = true;
}
}
return res;
}
$(function () {
var json = [
{ "SysName": "数据库", "SysGuid": "1", "CourseName": "SQL", "CourseGuid": "22", "Remarks": "大sb", "firstdate": "2013-1-1", "firstresult": "合格", "secdate": "2013-2-1", "secresult": "合格", "thirddate": "2013-3-1", "thirdresult": "合格" },
{ "SysName": "数据库", "SysGuid": "1", "CourseName": "MySQL", "CourseGuid": "23", "Remarks": "IQ太低", "firstdate": "2013-1-1", "firstresult": "不合格", "secdate": "2013-2-1", "secresult": "不合格", "thirddate": "2013-3-1", "thirdresult": "合格" },
{ "SysName": "数据库", "SysGuid": "1", "CourseName": "NoSQL", "CourseGuid": "24", "Remarks": "IQ太低", "firstdate": "2013-1-1", "firstresult": "不合格", "secdate": "2013-2-1", "secresult": "合格", "thirddate": "2013-3-1", "thirdresult": "合格" },
{ "SysName": "数据库", "SysGuid": "1", "CourseName": "Oracle", "CourseGuid": "25", "Remarks": "IQ太低", "firstdate": "2013-1-1", "firstresult": "不合格", "secdate": "2013-2-1", "secresult": "合格", "thirddate": "2013-3-1", "thirdresult": "合格" },
{ "SysName": "ASP.NET", "SysGuid": "2", "CourseName": "基础", "CourseGuid": "43", "Remarks": "IQ太低", "firstdate": "2013-1-1", "firstresult": "合格", "secdate": "2013-2-1", "secresult": "不合格", "thirddate": "2013-3-1", "thirdresult": "合格" },
{ "SysName": "ASP.NET", "SysGuid": "2", "CourseName": "高级", "CourseGuid": "44", "Remarks": "IQ太低", "firstdate": "2013-1-1", "firstresult": "合格", "secdate": "2013-2-1", "secresult": "不合格", "thirddate": "2013-4-1", "thirdresult": "合格" },
{ "SysName": "JavaScript", "SysGuid": "3", "CourseName": "基础", "CourseGuid": "54", "Remarks": "IQ太低", "firstdate": "2013-1-1", "firstresult": "合格", "secdate": "2013-2-1", "secresult": "合格", "thirddate": "2013-5-1", "thirdresult": "合格" },
{ "SysName": "JavaScript", "SysGuid": "3", "CourseName": "高级", "CourseGuid": "67", "Remarks": "IQ太低", "firstdate": "2013-1-1", "firstresult": "不合格", "secdate": "2013-2-1", "secresult": "合格", "thirddate": "2013-6-1", "thirdresult": "合格" },
];
createTable(json);

$("#btnsave").click(function () {
$("#ta").text(setDataXML());
});
});
function createTable(json) {
var tb = $("#tb");
var sys = new Array;
for (var i = 0; i < json.length; i++) {
sys.push(json[i].SysName);
}
//过滤重复
sys = sys.filterRepeat();
var tr = null;
for (var j = 0 ; j < sys.length; j++) {
tr += "<tr style='text-align: left' class=gridborder id=p" + j + "><td colspan=8>[-]" + sys[j] + "</td></tr>";
for (var i = 0; i < json.length; i++) {
if (json[i].SysName == sys[j]) {
tr += "<tr parent=p" + j + " style='text-align: center' pguid='" + json[i].SysGuid + "' cguid='" + json[i].CourseGuid + "'><td>" + json[i].CourseName + "</td><td>" + setDate(json[i].firstdate) + "</td><td>" + setSelect(json[i].firstresult) + "</td><td>" + setDate(json[i].secdate) + "</td><td>" + setSelect(json[i].secresult) + "</td><td>" + setDate(json[i].thirddate) + "</td><td>" + setSelect(json[i].thirdresult) + "</td><td>" + setInput(json[i].Remarks) + "</td></tr>"
}
}
}
tb.append(tr);
//设置行点击事件
$("tr.gridborder").css("cursor", "pointer")
.toggle(function () {
var txt = $(this).children().text();
$(this).children().text(txt.replace("-", "+"));
}, function () {
var txt = $(this).children().text();
$(this).children().text(txt.replace("+", "-"));

}).click(function () {
var id = $(this).attr("id");
$(this).siblings("tr[parent='" + id + "']").toggle();
});
//设置选中变色
$("tr[parent^=p]").toggle(function () {
$(this).attr('bgcolor', '#E3e4e5');
}, function () {
$(this).attr('bgcolor', '#ffffff');
});
}
function setSelect(obj) {
return "<select style='width:96%'><option value ='" + obj + "'>" + obj + "</option ><option value='合格'>合格</option><option value='不合格'>不合格</option></select>";
}
function setDate(obj) {
return "<input style='width:96%' type='text' value='" + obj + "' />";
}
function setInput(obj) {
return "<input style='width:96%' type='text' value='" + obj + "' />";
}
function setDataXML() {
var dataxml = $("<DataXML></DataXML>");
$("tr[parent^=p]").each(function () {
var item = $("<Course/>");
var sysguid = $(this).attr("pguid");
var cguid = $(this).attr("cguid");
var fdate = $(this).children().children().eq(0).val();
var fresult = $(this).children().children().eq(1).val();
var sdate = $(this).children().children().eq(2).val();
var sresult = $(this).children().children().eq(3).val();
var tdate = $(this).children().children().eq(4).val();
var tresult = $(this).children().children().eq(5).val();
var remark = $(this).children().children().eq(6).val();
item.attr("SysGuid", sysguid).attr("Remarks", remark).attr("CourseGUID", cguid)
.attr("FirstDate", fdate).attr("FirstResult", fresult)
.attr("SecDate", sdate).attr("SecResult", sresult)
.attr("ThirdDate", tdate).attr("ThirdResult", tresult);
dataxml.append(item);
});
return dataxml[0].outerHTML;
}

</script>
</head>
<body>
<form id="form1" runat="server">
<div>

</tbody>
</table>
</div>
<input id="btnsave" type="button" value="保存" />
<textarea id="ta" cols="100" rows="20" ></textarea>

</form>

</body>
</html>

jquery序列化form表单使用ajax提交后处理返回的json数据

1.返回json字符串: 复制代码代码如下: /** 将一个字符串输出到浏览器 */ protected void writeJson(String json) { PrintWriter pw = null; try { servletResponse.setContentType("text/plain;charset=UTF-8"); pw = servletResponse.getWrit
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)

html代码(test.html),js在html底部具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test-jquery-ajax-list</title> </head> <body> <div class="main">
jquery+json实现数据列表分页示例代码

该实例中,新闻数据列表未使用表格显示.下面将所有源码附上,其中用到jquery插件. 复制代码代码如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <c:
jQuery实现form表单元素序列化为json对象的方法

本文实例讲述了jQuery实现form表单元素序列化为json对象的方法.分享给大家供大家参考,具体如下: 这段代码序列化form表单元素为json对象: <!Doctype html> <html xmlns=http://www.w3.org/1999/xhtml> <head> <title>jQuery扩展--form序列化到json对象</title> <meta http-equiv=Content-Type content=&
通过Jquery的Ajax方法读取将table转换为Json

1. 创建Users表复制代码代码如下: create table Users ( UserId int identity(1,1) primary key, UserName varchar(20) ) insert into Users values('Bradley') insert into Users values('Dan') 复制代码代码如下: create table Users ( UserId int identity(1,1) primary key, UserNam
jquery+json 通用三级联动下拉列表

Author: shaoyun Email: shaoyun (at) yeah.net Date: 2010-03-10 02:03 Blog: http://shaoyun.cnblogs.com/ 用Jquery实现,原始代码只支持IE,这里我改了一下,我的代码里面有三个版本的实现第一个是通过读取XML构建,支持IE/firefox,chrome不支持,有兴趣的可以将读取XML的部分改成AJAX的方式,这样chrome支持就不成问题第二个是采用Json数据格式构建,是我的第二次尝试改进
jQuery把表单元素变为json对象

复制代码代码如下: (function($){ $.fn.serializeObject=function(){ var inputs=$(this).find("input,textarea,select"); var o = {}; $.each(inputs,function(i,n){ switch(n.nodeName.toUpperCase()){
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表

对于问题从后台获取json数据,将内容填充到下拉列表,代码非常简单,具体过程请看下面代码. 需求:url:链接 par:ID sel:下拉列表选择器 //获取下拉列表 function BuildSelectBox(url, par, sel) { $(sel).empty(); $.getJSON(url, { id: par }, function (json, textStatus) { for (var i = json.length - 1; i >= 0; i--
jquery自动将form表单封装成json的具体实现

前端页面: 复制代码代码如下: <span style="font-size:14px;"> <form action="" method="post" id="tf"> <table width="100%" cellspacing="0" cellpadding="0" border="0"> <tr
将JavaScript的jQuery库中表单转化为JSON对象的方法

大家知道Jquery中有serialize方法,可以将表单序列化为一个"&"连接的字符串,但却没有提供序列化为Json的方法.不过,我们可以写一个插件实现. 我在网上看到有人用替换的方法,先用serialize序列化后,将&替换成":"."'": /** * 重置form表单 * @param formId form的id */ function resetQuery(formId){ var fid = "#&qu
jQuery实现在下拉列表选择时获取json数据的方法

本文实例讲述了jQuery实现在下拉列表选择时获取json数据的方法.分享给大家供大家参考.具体如下: function populateDropDown() { $.getJSON('/getData.aspx',{Name:$('#parm').val()},function(data){ var select = $('#DDLControl'); var options = select.attr('options'); $('option', select).remove(); $.e
jQuery+json实现动态创建复杂表格table的方法

本文实例讲述了jQuery+json实现动态创建复杂表格table的方法.分享给大家供大家参考,具体如下: function SetSubTable() { var obj = jQuery.parseJSON($("#SubJsonStrValue").val()); window.ALLPARAMTERS = obj; var row_str = ""; var span_num = 1 for (var i = 0; i < obj.length; i+

JQuery实现table行折叠效果以JSON做数据源

相关推荐

随机推荐