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事件 ...
随机推荐
- LeetCode 230. 二叉搜索树中第K小的元素（Kth Smallest Element in a BST）
题目描述 给定一个二叉搜索树,编写一个函数 kthSmallest 来查找其中第 k 个最小的元素. 说明:你可以假设 k 总是有效的,1 ≤ k ≤ 二叉搜索树元素个数. 示例 1: 输入: roo ...
- 黑马lavarel教程---13、分页
黑马lavarel教程---13.分页 一.总结 一句话总结: - lavarel里面的分页操作和tp里面的分页操作几乎是一模一样的 - 控制器:$data=Lesson::paginate(2); ...
- vue 按需加载，缓存，导航守卫
开发中的注意事项:代码性能的优化 1. 减少对第三方的依赖,降低耦合度 2. 加强组件的重复利用率 3. 按需加载 4. 缓存 (尽量发送请求后保存数据) 5. 开发过程中,尽量有着面向对象的思想,这 ...
- 使用Aria2+Aria2Ng+OneIndex+OneDrive建立不限流量/离线BT下载/在线观看网盘/在线存储分享平台
获取OneDrive 自行搜索或者宝购买 安装 1.安装宝塔 #Centos系统 yum install -y wget && wget -O install.sh http://do ...
- AutoCompleteTextView实现搜索提示功能的实现
AutoCompleteTextView和EditText组件类似,都可以输入文本.但AutoCompleteTextView组件可以和一个字符串数组或List对象绑定,当用户输入两个及以上字符时,系 ...
- Oracle COALESCE函数
Oracle COALESCE函数 Oracle COALESCE函数语法为COALESCE(表达式1,表达式2,...,表达式n),n>=2,此表达式的功能为返回第一个不为空的表达式,如果都为 ...
- [nginx]设置代理和静态资源目录
upstream disconf { server ; #tomcat服务器的地址 } server { listen ; #监听端口 server_name localhost; #域名 index ...
- 五十九：Flask.Cookie之flask设置cookie过期时间
设置cookie有效期1.max_age:距离现在多少秒后过期,在IE8以下不支持2.expires:datatime类型,使用此参数,需参照格林尼治时间,即北京时间-8个小时3.如果max_age和 ...
- 在xcode找不到发布证书
解决方法 1.访问XCode的Preferences>Accounts,在Apple IDs里面找到你的帐号,选中后,在右侧,在Name下面会有一行描述.双击.在弹出窗口里面,有个刷新按钮,点击 ...
- Could not resolve host: mirrorlist.centos.org Centos 7 Unkown error
安装Centos7(core)以后,网卡默认不会启用.这是一个大坑,直接报错,这是一个过度优化,有几个开发人员/运维人员安装centos7(core)不用ssh去连接服务器的. 报错如下: Loade ...