<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="Scripts/jquery-1.8.2.min.js"></script>
<script src="Scripts/json2.js"></script>
<script>

function CreateTable() {
var str = '{ "total": 149, "columns": [{ "field": "EMPLOYEEID", "title": "员工编号" }, { "field": "EMPLOYEENAME", "title": "员工姓名" }],"rows":[{"EMPLOYEEID":"001","EMPLOYEENAME":"小明"},{"EMPLOYEEID":"002","EMPLOYEENAME":"小宏"}]}';
var data = JSON.parse(str);
var rowCount = data.rows.length;
var cellCount = data.columns.length;

var table = $("<table border=\"1\">");
table.appendTo($("#createtable"));

var trHeader = $("<tr></tr>");
trHeader.appendTo(table);
for (var j = 0; j < cellCount; j++) {
var td = $("<td>" + data.columns[j].title + "</td>");
td.appendTo(trHeader);
}

for (var i = 0; i < rowCount; i++) {
var tr = $("<tr></tr>");
tr.appendTo(table);
for (var j = 0; j < cellCount; j++) {
var field = data.columns[j].field;
var val="";
if (data.rows[i][field] != null)
{
val = data.rows[i][field];
}

var td = $("<td>" + val + "</td>");
td.appendTo(tr);
}
}
$("#createtable").append("</table>");
}

$(function () {
$("a[name=addRow]").click(function () {
$("#myTable tr:last").after(' <tr><td>Row4</td></tr>');
return false;
})
})

$(document).ready(function () {
//隐藏模板tr
$("#tb tr").eq(2).hide();
var i = 0;
$("#BtAdd").click(function () {
//复制一行
var tr = $("#tb tr").eq(2).clone();
tr.find("td").get(0).innerHTML = ++i;
tr.show();
tr.appendTo("#tb");
});
$("#BtDel").click(function () {
$("#tb tr:gt(2)").each(function () {
if ($(this).find("#CK").get(0).checked == true) {
$(this).remove();
}
});
i = 0;
$("#tb tr:gt(2)").each(function () {
$(this).find("td").get(0).innerHTML = ++i;
});
$("#CKA").attr("checked", false);
});
$("#CKA").click(function () {
$("#tb tr:gt(2)").each(function () {
$(this).find("#CK").get(0).checked = $("#CKA").get(0).checked;
});
});
})

$(function () {
$("#btnAdd").click(HandleUDFProperty);
function HandleUDFProperty() {
if ($("[tag='udfKey']").size() < 5) {
$("#udf_template").clone().find(":text").val("").end().find("a").click(function () {
$(this).parents('p').remove();
}).end().appendTo($("#UDFBlock"));
}
};

// 获取属性值
$("#btnGetValue").on("click", function () {
var keys = $("[tag='udfKey']"),
values = $("[tag='udfValue']"),
len = keys.length,
result = [],
txt = "";

for (var i = 0; i < len; i++) {
txt += "{key:" + keys.eq(i).val() + ", value:" + values.eq(i).val() + "},";
}

$("#result").text(txt);
});
})
</script>
</head>
<body>

<input type="button" value="添加表格" onclick="CreateTable(5,6)">
<input type="button" value="添加行">
<div id="createtable"></div>
<div id="createrow"></div>

<table style="width:100%" id="myTable">
<tr><td>Row1</td></tr>
<tr><td>Row2</td></tr>
<tr><td>Row3</td></tr>
</table>
<a href="#" name="addRow">Add Row</a>

<form id="form1">
<div>
<table id="tb" style="border:1px solid #000;">
<tr>
<td colspan="10" style="text-align:right">
<input id="BtAdd" type="button" value="添加" />&nbsp;<input id="BtDel" type="button" value="删除" />
</td>
</tr>
<tr>
<td style="width:25px;"></td>
<td style="width:25px;">
<input id="CKA" name="CKA" type="checkbox" />
</td>
<td style="width:20%;">
字段名
</td>
<td style="width:20%;">
名称
</td>
<td style="width:15%;">
数据类型
</td>
<td style="width:40px;">
主键
</td>
<td style="width:40px;">
必填
</td>
<td style="width:20%;">
长度
</td>
<td style="width:40px;">
有效
</td>
<td style="width:80px;">
排序
</td>
</tr>
<tr>
<td style="text-align: center"></td>
<td style="text-align: center">
<input id="CK" type="checkbox" name="CK" />
</td>
<td style="text-align: center">
<input id="TName" type="text" name="TName" />
</td>
<td style="text-align: center">
<input id="TRm" type="text" name="TRm" />
</td>
<td style="text-align: center">
<select id="SType" name="SType" style=" width:100px;">
<option>1</option>
<option>2</option>
</select>
</td>
<td style="text-align: center">
<input id="CKIsPR" type="checkbox" name="CKIsPR" />
</td>
<td style="text-align: center">
<input id="CKIsNull" type="checkbox" name="CKIsNull" />
</td>
<td style="text-align: center">
<input id="TLen" type="text" size="10" name="TLen" />
</td>
<td style="text-align: center">
<input id="CKIsUse" type="checkbox" checked="checked" name="CKIsUse" />
</td>
<td style="text-align: center">
<input id="TxtSortNO" type="text" size="4" name="TxtSortNO" />
</td>
</tr>
</table>

<div id="result">

</div>
</div>
</form>

<div id="UDFBlock">
<p id="udf_template">
<input id="CK" type="checkbox" name="CK" />
<input type="text" value="" tag="udfKey">
<input type="text" value="" tag="udfValue">
<a class="UDF_Delete" style="cursor:pointer">Delete</a>
</p>
</div>
<input type="button" id="btnAdd" value='Add' />
<input type="button" id="btnGetValue" value="Get Value" />
<div id="result">

</div>
</body>
</html>

jquery 对 table 的操作的更多相关文章

  1. jquery对于table的操作

    $("#datable tr").eq(0).children("td").eq(0).html()   //获得某行某列的值

  2. Visual Studio 2017中使用正则修改部分内容 如何使用ILAsm与ILDasm修改.Net exe(dll)文件 C#学习-图解教程(1):格式化数字字符串 小程序开发之图片转Base64(C#、.Net) jquery遍历table为每一个单元格取值及赋值 。net加密解密相关方法 .net关于坐标之间一些简单操作

    Visual Studio 2017中使用正则修改部分内容   最近在项目中想实现一个小工具,需要根据类的属性<summary>的内容加上相应的[Description]特性,需要实现的效 ...

  3. 【jQuery基础学习】04 jQuery中的表格操作及cookie插件的使用

    这章本来准备写成jQuery的表单操作和表格操作的. 然而昨天吧jQuery的表单操作看完,发现全部在炒之前章节的剩饭,所以就没写出来. 那么今天就来看看表格吧. 因为平常做的都是公司的内部管理系统, ...

  4. 【学亮IT手记】Ajax跨域问题精讲--jQuery解决跨域操作

    什么是跨域 跨域,它是不同的域名(服务器)之间的相互的资源之间的访问. 当协议,域名,端口号任意一个不同,它们就是不同的域. 正常情况下,因为浏览器安全的问题,不同域之间的资源是不可以访问的. 跨域的 ...

  5. [转]jQuery 选择器和dom操作

    居然是12年的总结.... 文章地址: http://www.cnblogs.com/happyPawpaw/articles/2595092.html JQuery选择器 1.基本选择器 基本选择器 ...

  6. 【Java EE 学习 33 上】【JQuery样式操作】【JQuery中的Ajax操作】【JQuery中的XML操作】

    一.JQuery中样式的操作 1.给id=mover的div采用属性增加样式.one $("#b1").click(function(){ $("#mover" ...

  7. JQuery中的DOM操作

    JQuery中有很多DOM操作,但是因为之前没有总结过,所以用来用去都是那几个,一写html中的表单交互,尤其是那些复杂的表单交互,就是一大坨的js,我自己看着都费劲. 所以我感觉有必要总结一下 &l ...

  8. Jquery基础之DOM操作

    转自:http://www.cnblogs.com/bro-ma/p/3063942.html JQuery中的DOM操作主要对包括:建[新建].增[添加].删[删除].改[修改].查[查找][像数据 ...

  9. jQuery -- DOM节点的操作

    DOM 操作的分类: dom core: getElementById() getElementsByTagName() getAttribute() setAttribute() html-dom ...

随机推荐

  1. J2EE基础总结(5)——EJB

    什么是EJB     JB事实上就是企业Java Beans. EJB是J2EE平台的重要组成部分. J2EE平台基于组件的企业级应用架构,提供多 层次.分布式和高事务的功能特点.     EJB提供 ...

  2. 一看就懂系列之 由浅入深聊一聊php的垃圾回收机制

    前言 是的,平时经常听到大牛说到的gc,就是垃圾回收器,全称Garbage Collection. 早期版本,准确地说是5.3之前(不包括5.3)的垃圾回收机制,是没有专门的垃圾回收器的.只是简单的判 ...

  3. const与static类成员

    const成员函数作用1. 不能修改类的成员变量,同时不能调用类的非const成员函数.(const成员函数中,this的类型是一个指向const类类型对象的const指针,const成员函数返回*t ...

  4. ios10--拳皇动画

    /** 图片的两种加载方式: 1> imageNamed: a. 就算指向它的指针被销毁,该资源也不会被从内存中干掉, b. 放到Assets.xcassets的图片,默认就有缓存, c. 图片 ...

  5. Timus 1146. Maximum Sum

    1146. Maximum Sum Time limit: 0.5 secondMemory limit: 64 MB Given a 2-dimensional array of positive ...

  6. 杂项-QXM:CFA(特许金融分析师)

    ylbtech-杂项-QXM:CFA(特许金融分析师) 1.返回顶部 1. CFA是“特许金融分析师”(Chartered Financial Analyst)的简称,它是证券投资与管理界的一种职业资 ...

  7. 图练习-BFS-从起点到目标点的最短步数

    http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2830 简单bfs #include <s ...

  8. windows2003下svn的安装

    Windows2003下svn平台搭建 编辑:dnawo 日期:2010-08-03 转自http://www.mzwu.com/article.asp?id=2557 字体大小: 小 中 大     ...

  9. 我们的微信小程序开发

    基于微信小程序的系统开发准备工作 腾讯推出微信小程序也有一段时间了,在各种行业里面也都掀起一阵阵的热潮,很多APP应用被简化为小程序的功能迅速推出,同时也根据小程序的特性推出各种独具匠心的应用,相对传 ...

  10. @RequestParam 和 @RequestBody 接受的时间格式

    这两个接受的时间格式不相同 首先看一下他们的区别 @RequestParam用来处理Content-Type: 为 application/x-www-form-urlencoded编码的内容.(Ht ...