用jQuery—ui对表格进行修改数据

最新推荐文章于 2024-05-15 16:01:44 发布

lyx_lyq

最新推荐文章于 2024-05-15 16:01:44 发布

阅读量1.2k

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/lyx_lyq/article/details/51029415

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/jquery-ui.css"/>
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui.js"></script>
<style>
table{
border: 1px solid gray;
text-align: center;
width: 1000px;
border-collapse: collapse;
}
table th, table td{
border: 1px solid gray;
}
.cl1:hover, .cl2:hover{
cursor: pointer;
background-color: orange;
}
</style>
</head>
<body>
<table>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>生日</th>
<th>手机</th>
<th>地址</th>
<th>备注</th>
</tr>
<tr class="cl1">
<td>1</td>
<td>张三</td>
<td>男</td>
<td>1980-06-06</td>
<td>13012345678</td>
<td>四川省成都市武侯区</td>
<td>笨蛋一个</td>
</tr>
<tr class="cl2">
<td>2</td>
<td>张三</td>
<td>男</td>
<td>1980-06-06</td>
<td>13012345679</td>
<td>四川省成都市武侯区</td>
<td>无</td>
</tr>
<tr class="cl1">
<td>3</td>
<td>哈哈</td>
<td>男</td>
<td>1983-03-15</td>
<td>13066665678</td>
<td>四川省成都市武侯区</td>
<td>.......</td>
</tr>
<tr class="cl2">
<td>4</td>
<td>王玲玲</td>
<td>女</td>
<td>1990-06-06</td>
<td>13088888888</td>
<td>四川省成都市武侯区</td>
<td>不是美女</td>
</tr>
<tr class="cl1">
<td>5</td>
<td>王建国</td>
<td>男</td>
<td>1985-06-30</td>
<td>13012341234</td>
<td>四川省成都市武侯区</td>
<td>哈哈</td>
</tr>
<tr class="cl2">
<td>6</td>
<td>李斯</td>
<td>男</td>
<td>1981-12-06</td>
<td>13012344444</td>
<td>四川省成都市武侯区</td>
<td>没有</td>
</tr>
</table>

<div title="个人信息" id="info">
序号： <input type="text" readonly/><br/>
姓名： <input type="text"/><br/>
性别： <select style="width: 153px;" name="sex" id="sex"><option>男</option><option>女</option></select><br/>
生日： <input type="text"/><br/>
电话： <input type="text"/><br/>
地址： <input type="text"/><br/>
备注： <textarea style="resize: none;" name="desc" id="desc" cols="19" rows="6"></textarea><br/>
</div>

<script>

$("#info").dialog({
modal: true,
autoOpen: false,
width: 450,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
},
buttons: { //添加关闭按钮
关闭: function() {
$( this ).dialog( "close" );
},
修改: function() { //添加修改按钮
saveinfo(this);
}
},
resizable: false
});

$("#info>:input:eq(3)").datepicker({
dateFormat: "yy-mm-dd", //日期的显示格式
changeMonth: true,
changeYear: true,
monthNamesShort: [ "一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二" ], //将月份改为中文
dayNamesMin: [ "日", "一", "二", "三", "四", "五", "六" ], //将星期改为中文
maxDate: "0" //限制最大日期为今天
});
$("#ui-datepicker-div").css("font-size","10px");

function saveinfo(obj){
//在保存数据前进行常规验证
var ins = $("#info>:input");
var bl1=/^[\u4e00-\u9fa5]{2,}$/.test(ins.eq(1).val()); //姓名的输入正则表达式
var bl3=/^1[34578]\d{9}$/.test(ins.eq(4).val()); //电话号码的输入正则表达式
var bl4=/^.+$/.test(ins.eq(5).val()); //地址的输入正则表达式

ins.eq(1).next("span").remove();
ins.eq(4).next("span").remove();
ins.eq(5).next("span").remove();
if(bl1 && bl3 && bl4){
var tds = $("table tr:eq("+ins.eq(0).val()+")").children("td");
ins.each(function(i){
tds.eq(i).html(ins.eq(i).val());
});
$(obj).dialog( "close" );
}else{
if(!bl1) ins.eq(1).after("<span style='color: red;font-size: 10px;'>姓名只能汉字，至少2个</span>");
if(!bl3) ins.eq(4).after("<span style='color: red;font-size: 10px;'>电话号码只能是11位数字</span>");
if(!bl4) ins.eq(5).after("<span style='color: red;font-size: 10px;'>地址必须有</span>");
}
}

//设置除了第一行以外的其他行的点击操作
//第二次调整需要遮罩层以及修改的内容块居中
$("table tr:gt(0)").click(function(){
$("#info").dialog('open');
// $("div[title='info']").css("z-index","10001").show();

//获取选中行的所有的格子的集合
var tds = $(this).children("td");
//获取隐藏块中所有表单元素的集合
var ins = $("#info>:input");
//使用each循环将表格中的数据依次放入到对应的表单元素中去
tds.each(function(i){
ins.eq(i).val($(this).html());
});
// //数据放置完毕，显示隐藏块
// $("div[title='info']").show();
});

</script>

</body>

</html>

lyx_lyq

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用jQuery—ui对表格进行修改数据

table{ border: 1px solid gray; text-align: center; width: 1000px; border-collapse: collapse; } table th, table td{ bo
复制链接

扫一扫