Jquery table相关--工时系统
1.jquery 的弹出对话框,单击事件之后
if (confirm("确定要删除?")) {
// //点击确定后操作
}
2.对某个table中的checkbox是否被选中的遍历
$("#dg").find(":checkbox:checked").each(function () {
//循环table中,被选中的Checkbox
})
3.获取table中被选中的checkbox的value值
$("#dg").find(":checkbox:checked").each(function () {
//this关键字 获取checkbox的value值
$(this).val();
})
**checkbox选中值的案例
<html>
<head>
<meta charset="gbk">
<!-- 引入JQuery -->
<script src="jquery-1.3.1.js" type="text/javascript"></script>
</head> <body>
<input type="checkbox" value="橘子" name="check">橘子1</input>
<input type="checkbox" value="香蕉" name="check">香蕉1</input>
<input type="checkbox" value="西瓜" name="check">西瓜1</input>
<input type="checkbox" value="芒果" name="check">芒果1</input>
<input type="checkbox" value="葡萄" name="check">葡萄1</input> <input type="button" value="方法1" id="b1">
<input type="button" value="方法2" id="b2"> </body> <script>
//方法1
$("#b1").click(function(){
//$('input:checkbox:checked') 等同于 $('input[type=checkbox]:checked')
//意思是选择被选中的checkbox
$.each($('input:checkbox:checked'),function(){
window.alert("你选了："+
$('input[type=checkbox]:checked').length+"个，其中有："+$(this).val());
});
}); //方法2
$("#b2").click(function(){
$.each($('input:checkbox'),function(){
if(this.checked){
window.alert("你选了："+
$('input[type=checkbox]:checked').length+"个，其中有："+$(this).val());
}
});
});
</script>
</html>
**Jquery遍历例子
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("li").each(function(){
alert($(this).text())
});
});
});
</script>
</head>
<body>
<button>输出每个列表项的值</button>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
</body>
</html>
PS:jquery操作table常用到的功能
1.鼠标移动行变色
$('#table1 tr').hover(function(){
$(this).children('td').addClass('hover')
}, function(){
$(this).children('td').removeClass('hover')
});
$("#table1 tr:gt(0)").hover(function() {
$(this).children("td").addClass("hover");
}, function() {
$(this).children("td").removeClass("hover");
});
2.奇偶行不同颜色
$('#table1 tbody tr:odd').css('background-color', '#bbf');
$('#table1 tbody tr:even').css('background-color','#ffc');
//操作class
$("#table1 tbody tr:odd").addClass("odd");
$("#table1 tbody tr:even").addClass("even");
3.隐藏一行
$('#table1 tbody tr:eq(3)').hide();
$("#table1 tr td::nth-child(3)").hide();
$("#table1 tr").each(function(){$("td:eq(3)",this).hide()});
4.隐藏一列
$('#table1 tr td::nth-child(3)').hide();
5.删除一行
// 删除除第一行外的所有行
$('#table1 tr:not(:first)').remove();
// 删除指定行
$('#table1 tr:eq(3)').remove();
6.删除一列
// 删除除第一列外的所有列
$('#table1 tr th:not(:nth-child(1))').remove();
$('#table1 tr td:not(:nth-child(1))').remove();
// 删除第一列
$('#table1 tr td::nth-child(1)').remove();
7.得到（设置）某个单元格的值
// 设置table1,第2个tr的第一个td的值。
$('#table1 tr:eq(1) td:nth-child(1)').html('value');
// 获取table1,第2个tr的第一个td的值。
$('#table1 tr:eq(1) td:nth-child(1)').html();
8.插入一行
// 在第二个tr后插入一行
$('<tr><td>插入3</td><td>插入</td><td>插入</td><td>插入</td></tr>').insertAfter($('#table7 tr:eq(1)'));
9.获取每一行指定的单元格的值
var arr = [];
$('#table1 tr td:nth-child(1)').each(function (key, value) {
arr.push($(this).html());
});
var result = arr.join(',');
10.全选或全不选
//方法零：
$('#all').on('click', function () {
$('input.checkSub').prop('checked', this.checked); // 给当前一起绑定的子选择添加效果
}); //方法一：
//全选或全不选 此传入的参数为event 如：checkAll(event)
function checkAll(evt){
evt=evt?evt:window.event;
var chall=evt.target?evt.target:evt.srcElement;
var tbl=$("#table1");
var trlist=tbl.find("tr");
for(var i=1;i<trlist.length;i++){
var tr=$(trlist[i]);
var input=tr.find("INPUT[type='checkbox']");
input.attr("checked",chall.checked);
}
}
//方法二：
//全选或全不选 此传入的参数为this 如：checkAll(this)
function checkAll(evt){
var tbl=$("#table1");
var trlist=tbl.find("tr");
for(var i=1;i<trlist.length;i++){
var tr=$(trlist[i]);
var input=tr.find("INPUT[type='checkbox']");
input.attr("checked",evt.checked);
}
}
//方法三：
//全选或全不选 此传入的参数为this 如：checkAll(this)
function checkAll(evt){
$("#table1 tr").find("input[type='checkbox']").each(function(i){
$(this).attr("checked",evt.checked)
});
}
//方法四：
//全选或全不选 此传入的参数为this 如：checkAll(this)
function checkAll(evt){
$("#table1 tr").find("input[type='checkbox']").attr("checked",evt.checked);
}
11.客户端动态添加行
function btnAddRow(){
//行号是从0开始，最后一行是新增、删除、保存按钮行 故减去2
var rownum=$("#table1 tr").length-2;
var chk="<input type='checkbox' id='chk_"+rownum+"' name='chk_"+rownum+"'/>";
var text="<input type='text' id='txt_"+rownum+"' name='txt_"+rownum+"' width='75px'/>";
var sel="<select id='sel_"+rownum+"'><option value='1'>男</option><option value='0'>女</option></select>";
var row="<tr><td>"+chk+"</td><td>"+text+"</td><td>"+sel+"</td><td>"+text+"</td><td>"+text+"</td></tr>";
$(row).insertAfter($("#table1 tr:eq("+rownum+")"));
}
12.客户端删除一行
每次只能删除一行，删除多行时出错
function btnDeleteRow(){
$("#table1 tr").find("input[type='checkbox']").each(function(i){
if($(this).attr("checked")){
if(i!=0){//不能删除行标题
$("#table1 tr:eq("+i+")").remove();
}
}
});
}
这个比上面的要好，可以一下删除多个记录
function btnDeleteRow(){
$("#table1 tr").each(function(i){
var chk=$(this).find("input[type='checkbox']");
if(chk.attr("id")!="checkall"){//不能删除标题行
if(chk.attr("checked")){
$(this).remove();
}
}
});
}
13.客户端保存
function btnSaveClick(){
//find()方法中我暂时不知道如何设定多个筛选条件，所以下面得不到select列表的值
//$("#table1 tr td").find("input[type='text']" || "select").each(function(i){
//alert($(this).val());
//});
$("#table1 tr").find("td").each(function(i){
if($(this).find("input[type='text']").length>0){
alert($(this).find("input[type='text']").val());
}else if($(this).find("select").length>0)
{
alert($(this).find("select").val());
}
});
}
Jquery table相关--工时系统的更多相关文章
- aspx中的表单验证 jquery.validate.js 的使用 以及 jquery.validate相关扩展验证(Jquery表单提交验证插件)
这一期我们先讲在aspx中使用 jquery.validate插件进行表单的验证, 关于MVC中使用 validate我们在下一期中再讲 上面是效果,下面来说使用步骤 jQuery.Valid ...
- jquery easyUI相关
jquery easyUI相关===================================easyUI表单验证处理//jquery easyUI 表单验证不通过让光标定位在第一个未通过验证的 ...
- jquery.Table实现的翻页功能比较完整漂亮，本想扩展个模版DIV
jquery.dataTable实现的翻页功能比较完整漂亮,本想提取其的翻页部分,再结合模版DIV,bootstrop实现聊天记息的展示. jquery.Table 与table结合的较紧,不能在很下 ...
- ABAP内表(internal table)有关的系统变量
SY-TABIX – 内表当前行的索引号.SY-TABIX 的值可以被以下命令修改,但是只适用于索引表(index table).对于哈希表(Hashed table),这个系统变量的值为空或0. A ...
- jQuery.data的是jQuery的数据缓存系统
jQuery.Data源码 jQuery.data的是jQuery的数据缓存系统 jQuery.data的是jQuery的数据缓存系统.它的主要作用就是为普通对象或者DOM元素添加数据. 1 内部存储 ...
- Agent Job相关的系统表
参考: http://www.cnblogs.com/CareySon/p/5262311.html msdb中,有三张与Agent Job相关的系统表,需要了解一下 msdb.dbo.sysjobs ...
- Jquery Validate 相关参数
Jquery Validate 相关参数 //定义中文消息 var cnmsg = { required: “必选字段”, remote: “请修正该字段”, email: “请输入正确格式的电子邮件 ...
- jQuery table td可编辑
参考链接: http://www.freejs.net/ http://www.freejs.net/article_biaodan_34.html http://www.freejs.net/sea ...
- jquery checkbox相关 prop方法
jquery checkbox相关 prop方法 firefox中 checkbox属性checked="checked"已有,但复选框却不显示打钩的原因复选框绑定了click事件 ...
随机推荐
- （二）C语言之常量
- python3笔记二十三：正则表达式之元字符
一:学习内容 匹配单个字符与数字:..[].^.\d.\D.\w.\W.\s.\S 匹配锚字符(边界字符):^.$.\A.\Z.\b.\B 匹配多个字符:(xyz) .x?.x*..*.x+.x{n} ...
- Nginx数据结构之红黑树ngx_rbtree_t
1. 什么是红黑树? 1.1 概述 红黑树实际上是一种自平衡二叉查找树. 二叉树是什么?二叉树是每个节点最多有两个子树的树结构,每个节点都可以用于存储数据,可以由任 1 个节点访问它的左右 子树或父节 ...
- 基本CSS布局三
基本CSS布局三------图片视频网格 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu ...
- 高效C++无锁队列实现-moodycamel::ConcurrentQueue
国外一牛人做的,支持多平台,支持多线程写.多线程读,并可指定读写token,转载过来. 感觉作者也时刻维护着他这个项目,我提了一些问题,每次都会及时得到答复,而且回复得非常认真仔细,非常赞! 链接地址 ...
- 打开App显示文件已损坏，打不开，您应该将它移到废纸篓，怎么办？
1. 首先确保系统安全设置已经改为任何来源 sudo spctl --master-disable 2. 打开任何来源后,到应用程序目录中尝试运行软件,如果仍提示损坏,请在应用图标上,鼠标右键,在弹出 ...
- 加密算法之 MD5算法
题记:本人自测了很多次,该算法和apache的commons utils包中的MD5算法计算一致 一.针对文件内容生成MD5值 应用场景:针对文件,在传输过程由于网络原因丢帧或者被人别恶意篡改内容,可 ...
- Python基于回溯法解决01背包问题实例
Python基于回溯法解决01背包问题实例 这篇文章主要介绍了Python基于回溯法解决01背包问题,结合实例形式分析了Python回溯法采用深度优先策略搜索解决01背包问题的相关操作技巧,需要的朋友 ...
- selenium三种断言以及异常类型
elenium提供了三种模式的断言:assert .verify.waitfor 1)Assert(断言) 失败时,该测试将终止. 2)Verify(验证) 失败时,该测试将继续执行,并将错误记入日志 ...
- Mac下的Pycharm教程
除非你是用记事本写代码,或者用vim写代码的大牛,那么推荐使用PyCharm编写Python代码. PyCharm是一种Python IDE,带有一整套可以帮助用户在使用Python语言开发时提高其效 ...